如何預選擇值

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：「Department 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>