当 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.options
更改后保留 vm.selected = "1"
?
编辑:
所以我尝试在设置 vm.options
之后设置 vm.selected
,但是在我的 Controller 之后 Angular 设置 vm.selected
为 null代码运行。
所以我尝试这样做:
$timeout(function(selected) {
vm.selected = selected;
}, 0, true, vm.selected);
这成功地将 vm.selected
设置为以前的值,但是 View 没有更新。
编辑:
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、选择一个选项,点击更新选项按钮。
最佳答案
Be careful when using select as and track by in the same expression. 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>
关于javascript - ngOptions 更改时 ngModel 未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41132860/