带有硬编码选项的AngularJS多选在模型更新时不会更新答案

【问题标题】：AngularJS multiselect with hardcoded options doesn't update when model does带有硬编码选项的AngularJS多选在模型更新时不会更新
【发布时间】：2014-11-27 23:08:57
【问题描述】：

我有一个使用 Angular 控制之外的值生成的多选元素。实际上，这会在我想从角度控制的选择中创建一些静态 html 选项。问题是，当模型第一次初始化（从延迟函数）时，所有其他变量都会在页面上更新，但选择不会。当我在列表中选择一个项目时，它会显示选择的正确值（包括来自应该首先选择的负载的值）。 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 是与值匹配的字符串数组。为什么我分配数组时选择不更新？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

那是因为ngModelcompares by reference and not by value。不幸的是，您尝试使用 <select> 元素的方式与 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>

【讨论】：