使用 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/

10-11 09:34