ngOptions更改时未更新ngModel

罗德尼757

当ngOptions数组更改时，如何防止angular更新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>

这是一个大胆的示范。1，选择一个选项，单击更新选项按钮。

汉斯马德

在同一表达式中使用select as和by 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>

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"});
  };
});

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。