帶有硬編碼選項的AngularJS multiselect在模型執行時不會更新

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 按引用而不是按值進行比較 。 不幸的是，您嘗試使用<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>