如何使用AngularJS在多選擇輸入中預選擇值

Question

我有以下HTML：

<div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()">
    <select multiple="multiple" style="height:100px;" class="form-control" 
            ng-model="csCtrl.Template.BusinessUnitMappings"
            ng-options="department as department.LocalizedName for department in csCtrl.DepartmentMasters">
    </select>
</div>

在CreateSpreadsheetCtrl.init（）內部，我們正在加載一個名為“ DepartmentMasters”（csCtrl.DepartmentMasters）的數組，該數組包含對象列表（例如{Id：1，Name：“ Department 1”}，{Id：2，Name： “部門2”}）。

同樣在init（）方法中，我們加載此“ csCtrl.Template”對象，該對象內部有一個名為“ BusinessUnitMappings”（csCtrl.Template.BusinessUnitMappings）的屬性，該屬性是DepartmentMaster對象的數組。

使用上面的代碼，它可以正確綁定到模型，並且當您更改選擇時，csCtrl.Template.BusinessUnitMappings可以正確綁定。

但是，當csCtrl.Template.BusinessUnitMappings預加載有現有對象數組時，當頁面最初加載時，它不會在UI中選擇它。

Answer 1

將表達式更改為：

ng-options="department as department.Name for department in csCtrl.DepartmentMasters track by department.Id"

工作演示：

 var myApp = angular.module('myApp', []); myApp.controller('MyCtrl',function($scope) { var ctrl = this; ctrl.DepartmentMasters = [ {Id:1, Name: "Department 1" }, {Id:2, Name: "Department 2" }, {Id:3, Name: "Department 3" }, {Id:4, Name: "Department 4" }, {Id:5, Name: "Department 5" } ]; ctrl.Template = { "BusinessUnitMappings" : [ {Id:2, Name: "Department 2" }, {Id:3, Name: "Department 3" } ] } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl as csCtrl"> <select multiple="true" style="height:100px;" class="form-control" ng-model="csCtrl.Template.BusinessUnitMappings" ng-options="department as department.Name for department in csCtrl.DepartmentMasters track by department.Id"></select> </div>