Question

我有一个多选元素，使用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是与值匹配的字符串数组。为什么在分配数组时选择不会更新？

Answer 1

那是因为ngModel compares 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>

具有硬编码选项的AngularJS multiselect在模型时不会更新

1 个答案: