3

当用户更改菜单中选择的项目时，很容易使用 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 完成此任务的最佳方法是什么？我是否误解了有关数据绑定的一些基本知识？

4

2 回答 2

5

如果您直接将 ng-model 绑定到如下范围变量，则范围变量将不会以某种方式更新。

<select ng-model="selection" ng-options="option for option in options">

相反，在您的范围内定义一个视图模型并将 ng-model 绑定到视图模型的字段，视图模型字段将被更新。

<select ng-model="viewmodel.selection" ng-options="option for option in options">

在您的控制器中，您应该这样做：

app.controller('SomeCtrl', ['$scope'
    function($scope)
    {
        $scope.viewmodel = {};
    });
于 2015-05-02T11:52:36.750 回答
2

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

希望这可以帮助。

于 2013-07-08T22:36:39.763 回答