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

当用户更改菜单中选择的项目时，可以很容易地使用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实现这一目标的最佳方法是什么？我是否误解了数据绑定的一些基本内容？

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

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

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

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

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

app.controller('SomeCtrl', ['$scope'
    function($scope)
    {
        $scope.viewmodel = {};
    });

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

希望这能有所帮助。

相关内容

最新更新

热门标签：