javascript - 当模型更新时，具有硬编码选项的 AngularJS 多重选择不会更新

Question

我有一个多选元素，它是使用 Angular 控制之外的值生成的。实际上，这会在选择内创建一些静态 html 选项，我想从 Angular 控制它们。问题是，当模型首次初始化(从延迟函数)时，页面上的所有其他变量都会更新，但选择不会更新。当我在列表中选择一个项目时，它会显示所选的正确值(包括来自应首先选择的负载的值)。 html 看起来像这样:

<select class="multiselect" multiple="multiple" id="roles" ng-model="model.userRoles">
    <option value="Owner" >owner</option>
    <option value="Driver">driver</option>
    <option value="Lessee">lessee</option>
</select>

其中 model.userRoles 是与值匹配的字符串数组。为什么当我分配数组时选择没有更新？

Answer 1

那是因为ngModel compares by reference and not by value 。您尝试使用 <select> 的方式不幸的是，element 与 Angular 内置指令的工作方式不兼容。

你最好的选择(没有双关语)是使用内置的 ng-options 填充下拉列表:

//inside your controller:
this.roles = ['Owner','Driver','Lessee'];

<!-- in your markup (assumes 'Controller As' -->
<select multiple="multiple" 
        ng-options="role for role in ctrl.roles"
        ng-model="ctrl.userRoles" >
</select>

这样，Angular 将跟踪各个选项的值，并相应更新底层模型的更新。

为了更彻底，这里有一个工作示例供您查看。

(function() {
  'use strict';

  function SimpleController($timeout) {
    this.roles = ['Owner', 'Driver', 'Lessee'];
    this.userRoles = [];
    
    //Simulate service call
    $timeout(function(){
    
      this.userRoles.push('Owner');
      this.userRoles.push('Driver');
      
    }.bind(this), 1000);
  }
  
  SimpleController.$inject = ['$timeout'];

  angular.module('my-app', [])
    .controller('simpleCtrl', SimpleController);

}());

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<div class="container" ng-app="my-app" ng-controller="simpleCtrl as ctrl">
  <div class="row">
    <select class="form-control" multiple="multiple" ng-options="role for role in ctrl.roles" ng-model="ctrl.userRoles">
    </select>
  </div>
  <h2>User Roles</h2>
  <div class="row">
    <div class="well" ng-repeat="role in ctrl.userRoles">
      {{role}}
    </div>
  </div>
</div>