Question

当ngOptions数组发生变化时，如何防止角度更新ngModel？当ngOptions数组发生更改时，Angular似乎将ngModel设置为null。

.controller('myController', function($scope) {
    var vm = this;
    vm.options = [];
    vm.selected = null;
    vm.getOptions = function(id) {
        $http.get().done(function(response) {
            vm.options = response.data;
        });
    };
}

说vm.selected = "1";

调用vm.getOptions时，选择选项会按预期重新填充，但angular似乎将vm.selected设置为null

如何在vm.selected = "1"更改后保留vm.options

编辑：

所以我尝试在vm.selected设置后设置vm.options，但在我的控制器代码运行后，角度设置vm.selected为null。

所以我试着这样做：

$timeout(function(selected) {
   vm.selected = selected;
}, 0, true, vm.selected);

这成功地将vm.selected设置为上一个值，但视图未更新。

编辑：

html是：

<select name="myOption" ng-model="vm.selected"
    ng-options="option.id as option.name for option in vm.options track by option.id">
<option value="">Select an option</option>

这是一个plunkr来演示。 1，选择一个选项，单击更新选项按钮。

Answer 1

在同一表达式中使用select as和track by时要小心。 ngOptions

您正在使用id作为ngModel的值。你无法跟踪option.optionId。您应该使用选项实例：

<select ng-model="vm.selected" 
        ng-options="option as option.optionTitle for option in vm.options track by option.optionId">
  <option value="">Select an option</option>
</select>

＆＃13;

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope, $http) {
  var vm = this;
  vm.selected = null;
  vm.options = [{optionId: 1, optionTitle: "one"}, {optionId: 2, optionTitle: "two"}];
  vm.updateOptions = function() {
    vm.options.push({optionId: 3, optionTitle: "three"});
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  
<body ng-app="app" ng-controller="MainCtrl as vm">
    <select ng-model="vm.selected" ng-options="option as option.optionTitle for option in vm.options track by option.optionId">
      <option value="">Select an option</option>
    </select>
    <hr/>
    vm.selected = {{ vm.selected }}
    <br>
    <button ng-click="vm.updateOptions()">Update Options</button>
    <br>
</body>

＆＃13;

Answer 2

由于在选项更改时重置模型的众多请求，Angular确保在版本的ng-options更改后重置模型值＆gt; 1.4。但是，在旧版本的Angular中，这将继续有效。

Click here for the reference

为了获得所需的功能，我建议您在选项上使用ng-repeat而不是ng-options。

<select ng-model="vm.selected">
  <option value="">Select an option</option>
  <option ng-repeat="option in vm.options track by option.optionId" value="{{option.optionId}}">{{option.optionTitle}}</option>
</select>

查看此plnkr example

希望这可以帮到你！

Answer 3

由于没有将模型视为选项的对象并使用所选选项的属性，这是我自己被烧毁的情况之一

我如何保持vm.selected =＆＃34; 1＆＃34; vm.options改变后？

vm.selected是一个不是对象的数字。它必须是一个对象，并且必须是options

中的引用

我做了很小的改动来说明并让它发挥作用。

首先vm.selected通过以下更改将其视为对象。通知模型不再是optionId。

ng-options="option as option.optionTitle for option in vm.options track by option.optionId"

在控制器中，我们将模型初始化为对象和对选项的引用。

vm.options = [{optionId: 1, optionTitle: "one"}, {optionId: 2, optionTitle: "two"}];
vm.selected = vm.options[1];

还修改了plunkr以获取与optionId保持唯一相关的其他更改。然而，这些变化并没有为这一点做出贡献。

ngOptions更改时ngModel未更新

3 个答案: