Question

当我选择一个项目时，输入元素将更新。但是，保存所有更改后，该元素将不绑定到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

首先，您不需要if l1 or l2 or l3 or l4 or l5 or l6 or l7 or l8 or l9: print 'we have to do something in one or more lists' if l1: print 'l1' f1() if l2: print 'l2' f2() if l3: print 'l3' f3() if l4: print 'l4' f4() if l5: print 'l5' f5() if l6: print 'l6' f6() if l7: print 'l7' f7() if l8: print 'l8' f8() if l9: print 'l9' f9()或input上的内插括号。这就是双向绑定的目的，并且最终是textarea在幕后所做的事情。

您的评论是正确的，因为您在选择中也不需要ng-model，这就是反应的美。这是您的模板的外观：

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>选择的对象属性的文本框和文本区域。

Working Fiddle

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

1 个答案: