Question

我有以下HTML：

row11

在CreateSpreadsheetCtrl.init（）中，我们正在加载一个名为“DepartmentMasters”的数组（csCtrl.DepartmentMasters），其中包含一个对象列表（例如{Id：1，Name：“Department 1”}，{Id：2 ，名称：“部门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>

如何使用AngularJS在多选输入中预选值

1 个答案: