Question

当用户更改菜单中选定的项目时，可以轻松使用Angular数据绑定强制更改JavaScript属性。但是，当用于生成菜单的模型发生更改时，我无法弄清楚如何强制更改数据绑定属性。

这个小提琴演示了行为：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];
    };
}

我希望数据绑定属性在所选选项因任何原因发生更改时更新，因为用户选择了不同的选项，或者因为模型和因此选项已更改。我可以使用$watch来完成这项工作，但我无法理解为什么单靠数据绑定是不够的。使用Angular实现此目的的最佳方法是什么？我是否误解了数据绑定的基本内容？

Answer 1

我不确定您想要的确切行为，但您可以随时查看选项，因此，在变更时采取行动（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;
    });
}

希望这有帮助。

AngularJS：选择选项更改时更新ngModel属性

1 个答案: