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

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

javascript angularjs

Javascript AngularJS:选择选项更改时更新ngModel属性,javascript,angularjs,Javascript,Angularjs,当用户更改菜单中选定的项目时，使用角度数据绑定强制JavaScript属性更改是很容易的。但是，当用于生成菜单的模型更改时，我不知道如何强制数据绑定属性更改此小提琴演示了以下行为：。通过单击“更改选项”更改模型会使“选择”选项正确更改。但数据绑定属性不会立即更改，它仅在用户选择其他菜单选项时更改 <body ng-app ng-controller="bodyCtrl"> <select ng-model="selection" ng-options="option

当用户更改菜单中选定的项目时，使用角度数据绑定强制JavaScript属性更改是很容易的。但是，当用于生成菜单的模型更改时，我不知道如何强制数据绑定属性更改

此小提琴演示了以下行为：。通过单击“更改选项”更改模型会使“选择”选项正确更改。但数据绑定属性不会立即更改，它仅在用户选择其他菜单选项时更改

<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];
    };
}


更改选项


选择：{{selection}}
函数bodyCtrl（$scope）{
$scope.options=[10,20,30]；
$scope.changeOptions=函数（）{
$scope.options=[11,22,33]；
};
}

我希望数据绑定属性在所选选项因任何原因发生更改时更新，这可能是因为用户选择了不同的选项，也可能是因为模型和选项发生了更改。我可以使用

$watch

实现这一点，但我无法理解为什么仅仅数据绑定是不够的。使用Angular完成此任务的最佳方法是什么？我是否误解了数据绑定的一些基本内容

我不确定您想要的确切行为，但您可以随时查看选项，因此，在更改时采取行动（）：

希望这有帮助。

如果您直接将ng模型绑定到下面的范围变量，那么范围变量将不会以某种方式更新

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

您想保留相同的索引吗？我天真的期望是，当数据绑定的选项选择更改时，如果更改前的值出现在新选项中的任何位置，则无论索引如何，都将继续选择该值，并以其他方式选择空选项。我想我明白您的意思。当触发

changeOptions（）

时，您希望

{{selection}}

更改为

。我想我也会有同样的期望。有趣的是，定义ng模型会创建一个称为“selection”的范围变量。更改ng选项时，不会触发更新“选择”的更改。在这一点上，它是一个独立的、不相关的变量。我喜欢下面davin的回答，因为它恰当地将DOM事件和数据视为完全独立的实体。似乎模型应该随着选项的变化而变化，因为它们似乎是绑定在一起的。@rGil它们是如何绑定在一起的？下拉列表的选择操作将绑定所选值。更改选项只会更改列表绑定到的内容。我所期望的行为是数据绑定属性始终准确反映当前选定的选项。这在某些情况下不会发生，例如，由于模型更改而更改选项时。这是否澄清了我的问题？@Chris通过更改选项，您并没有更改模型值（选择的<代码>部分）。@Chris只是为了澄清，当您声明属性

ng model=“selection”

时，angular在引擎盖下添加了一个名为

选择的新范围字段。因此，不存在隐式绑定连接。在选择列表时，选择字段将更新。锁定它！谢谢，伙计，知道这是怎么回事吗？通常，我可以直接绑定到中的模型scope@HaveAGuess还不知道原因。。。在许多情况下，我必须将变量放入视图模型中才能进行更新。谢谢。非常奇怪，因为到目前为止，我有一个相当大的应用程序在没有视图模型的情况下运行：(
<select ng-model="selection" ng-options="option for option in options">

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

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