使用 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)的一些基本知识? 最佳答案
我不确定您想要的确切行为,但您始终可以查看选项,因此,在更改时采取操作 ( 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;
});
}
希望这可以帮助。
关于javascript - AngularJS:选择选项更改时更新 ngModel 属性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17536751/