どのようにAngularJS

Question

とマルチセレクト入力中に事前選択値Iは、次のようなHTMLがあります（CreateSpreadsheetCtrl.initインサイド

<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> 

）を、私たちは「DepartmentMasters」（csCtrl.DepartmentMasters）という配列をロードしています{Id：1、Name： "Department 1"}、{Id：2、Name： "Department 2"}などのオブジェクトのリストが含まれています。

また、init（）メソッドでは、DepartmentMasterオブジェクトの配列である "BusinessUnitMappings"（csCtrl.Template.BusinessUnitMappings）というプロパティを持つこの "csCtrl.Template"オブジェクトを読み込みます。

上記のコードでは、モデルに正しくバインドされます。選択を変更すると、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>