对 ng-options 对象的更改未更新为 html

Question

当我 select 一个项目时，输入元素会更新。但是，在我保存任何更改后，该元素将解除绑定到 ng-model 对象。很抱歉，如果这是一个简单的问题，我搜索了几个小时但无法弄清楚。谢谢！

HTML

<div ng-app="MyApp" ng-controller="MyController">
  <label>Message Name</label><br>
  <input id="msgName" type="text" value="{{selectedMsg.name}}"><br>

  <label>Load Message</label><br>
  <select id="msgSelect" ng-model="selectedMsg" ng-options="msg.name for msg in Messages"></select><br>

  <label><br>
    Message Text
  </label><br>
  <textarea id="msgText">{{selectedMsg.text}}</textarea><br>
  <button id="saveBtn">SaveMessage</button>

</div>

Javascript

let msg1 = {
  name: "Message 1",
  text: "This is Message 1's text."
}
let msg2 = {
  name: "Message 2",
  text: "This is Message 2's text."
}

let messages = [msg1, msg2];

let app = angular.module('MyApp', []);
app.controller('MyController', function ($scope){
  scope = $scope;
  scope.Messages = messages;
}); 
$('#saveBtn').on('click', () => {
  scope.selectedMsg.name = $('#msgName').val();
  scope.selectedMsg.text = $('#msgText').val();
  scope.$apply();
});

Link to codepen.

Answer 1

首先，您不需要 input 或 textarea 上的插值括号。这就是双向绑定的目的，也是 ng-model 在幕后所做的最终工作。

您的评论是正确的，您在 select 中也不需要 ng-change，这就是反应性的美妙之处。您的模板应如下所示：

<select ng-model="selectedMsg" ng-options="msg.name for msg in Messages"></select><br>

<label>Message Name</label><br>
<input type="text" ng-model="selectedMsg.name"><br>

<label><br>
  Message Text
</label><br>
<textarea ng-model="selectedMsg.text"></textarea><br>

您可以看到所有输入都共享一个对象模型，特别是文本框和文本区域绑定到由 select 编辑的对象 select 的属性。

Working Fiddle

对 ng-options 对象的更改未更新为 html

Changes to ng-options object not updating to html

javascript

html

angularjs

ng-options