javascript - ngOptions 更改时 ngModel 未更新

标签 javascript angularjs

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

相关文章:

javascript - 如何在JSP中实现机场自动完成功能?

javascript - 无法使用 jQuery 在 td 中获取输入?

javascript - 如何更改使用选项组的下拉列表的选定值?

javascript - Angular : Can I completely disable sanitizing?

javascript - AngularJS + Rails : Unknown provider: e

javascript - 上传前的 AngularJS 图像预览显示所选的上一张图像

javascript - AngularJS ng-repeat 嵌套形式 w/socket.io

javascript - 如何将Mysql原始字段解析为 Node js中的对象

javascript - Jquery:当两个或多个条件为真时选择一个元素

javascript - 如何工作 ng-controller 而结果没有显示在浏览器上?