How to pre-select values in multi select input with AngularJS

Question

I have the following 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>

Inside the CreateSpreadsheetCtrl.init(), we are loading an array called "DepartmentMasters" (csCtrl.DepartmentMasters) which contains a list of objects (e.g. {Id:1, Name: "Department 1" }, {Id:2, Name: "Department 2" }).

Also in the init() method, we load this "csCtrl.Template" object, which has a property inside it called "BusinessUnitMappings" (csCtrl.Template.BusinessUnitMappings), which is an array of DepartmentMaster objects.

With the above code, it binds correctly to the model and when you change the selections, csCtrl.Template.BusinessUnitMappings is bound correctly.

However, when csCtrl.Template.BusinessUnitMappings is pre-loaded with an existing array of objects, it doesn't select it in the UI when the page initially loads.

You could solve your problem by using track by department.Id but its harmful as you used as syntax.. — Pankaj Parkar
– Pankaj Parkar, Commented Feb 10, 2017 at 16:21
@PankajParkar Thanks for your repsonse. Can you please elaborate on what you mean by "but its harmful as you used as syntax"? — thiag0
– thiag0, Commented Feb 10, 2017 at 17:21

Rohìt Jíndal · Accepted Answer · 2017-02-10 19:21:07Z

Change the expression to :

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

Working Demo :

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>

Collectives™ on Stack Overflow

How to pre-select values in multi select input with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related