当用户更改菜单中选定的项目时，使用 Angular 数据绑定(bind)可以很容易地强制 JavaScript 属性发生变化。但是，我不知道如何在用于生成菜单的模型更改时强制更改数据绑定(bind)属性。
这个 fiddle 演示了行为:http://jsfiddle.net/2pHGX/ .通过单击 changeOptions 更改模型会导致选择选项正确更改。但是数据绑定(bind)属性不会立即改变，它只会在用户选择不同的菜单选项时改变。
<body ng-app ng-controller="bodyCtrl">
<select ng-model="selection" ng-options="option for option in options">
</select>
<button ng-click="changeOptions()">changeOptions</button>
<br>
selection: {{selection}}
</body>
function bodyCtrl($scope) {
$scope.options = [10, 20, 30];
$scope.changeOptions = function() {
$scope.options = [11, 22, 33];
};
}
我希望数据绑定(bind)属性在所选选项因任何原因发生变化时更新，这可能是因为用户选择了不同的选项，也可能是因为模型和选项发生了变化。我可以使用 $watch 来完成这项工作，但我不明白为什么仅靠数据绑定(bind)是不够的。使用 Angular 实现此目的的最佳方法是什么？我是否误解了有关数据绑定(bind)的一些基本知识？
最佳答案
如果您直接将 ng-model 绑定(bind)到一个范围变量，如下所示，范围变量将不会以某种方式更新。
<select ng-model="selection" ng-options="option for option in options">
相反，在您的范围内定义一个 View 模型并将 ng-model 绑定(bind)到一个 View 模型字段， View 模型字段将被更新。
<select ng-model="viewmodel.selection" ng-options="option for option in options">
在你的 Controller 中，你应该这样做:
app.controller('SomeCtrl', ['$scope'
function($scope)
{
$scope.viewmodel = {};
});
关于javascript - AngularJS:选择选项更改时更新 ngModel 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17536751/