javascript AngularJS：选择选项更改时更新 ngModel 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17536751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: Updating ngModel property when select options change
提问by Chris
It is easy to use Angular data binding to force a JavaScript property to change when a user changes the item selected in a menu. However, I cannot figure out how to force a data bound property to change when the model used to generate a menu changes.
使用 Angular 数据绑定很容易在用户更改菜单中选择的项目时强制更改 JavaScript 属性。但是，当用于生成菜单的模型发生更改时，我无法弄清楚如何强制更改数据绑定属性。
This fiddle demonstrates the behavior: http://jsfiddle.net/2pHGX/. Changing the model by clicking changeOptions causes the select options to change correctly. But the data bound property does not change immediately, it only changes when the user selects a different menu option.
这个小提琴演示了这种行为：http: //jsfiddle.net/2pHGX/。通过单击 changeOptions 更改模型会导致选择选项正确更改。但是数据绑定属性不会立即更改，它只会在用户选择不同的菜单选项时更改。
<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];
};
}
I want the data bound property to update when the selected option changes for any reason, either because the user picked a different option or because the model, and therefore options, changed. I can make this work with $watch, but I cannot understand why data binding alone is not sufficient. What is the best way to accomplish this with Angular? Am I misunderstanding something fundamental about data binding?
我希望数据绑定属性在所选选项因任何原因发生更改时更新，无论是因为用户选择了不同的选项，还是因为模型以及选项发生了变化。我可以使用 来完成这项工作$watch，但我不明白为什么仅靠数据绑定是不够的。使用 Angular 完成此任务的最佳方法是什么？我是否误解了有关数据绑定的一些基本知识？
采纳答案by Davin Tryon
I'm not sure the exact behaviour that you want, but you can always watch options and, therefore, on change take an action (JSFiddle):
我不确定您想要的确切行为，但您始终可以查看选项，因此，在更改时采取行动（JSFiddle）：
function bodyCtrl($scope) {
$scope.selection = 0;
$scope.options = [ 10, 20, 30];
$scope.changeOptions = function() {
$scope.options = [11, 22, 33];
};
$scope.$watch('options', function() {
$scope.selection = 0;
});
}
Hope this helps.
希望这可以帮助。
回答by Yang Zhang
If you directly bind ng-model to a scope variable as below, the scope variable somehow will not be updated.
如果您直接将 ng-model 绑定到一个范围变量，如下所示，范围变量不会以某种方式更新。
<select ng-model="selection" ng-options="option for option in options">
Instead, define a view model in your scope and bind ng-model to a field of view model the view model field will be updated.
相反，在您的范围内定义一个视图模型并将 ng-model 绑定到视图模型字段将更新视图模型字段。
<select ng-model="viewmodel.selection" ng-options="option for option in options">
In your controller, you should do this:
在您的控制器中，您应该这样做：
app.controller('SomeCtrl', ['$scope'
function($scope)
{
$scope.viewmodel = {};
});
