Geek Answers Handbook

How to set default value for ng-options (multiple choice)

I wanted to set a default value for my ng options using ng-init , ng-model , etc. They did not work at all. My code is as follows:

Angular

 var app = angular.module('role', []); app.controller('fooController', function($scope){ $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}]; $scope.user.roles = $scope.roles[0]; });

HTML

 <body data-ng-app="role" data-ng-controller="fooController"> <select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select> </body>

Here is my Plunkr. Any help would be greatly appreciated.

+8
angularjs
source share
4 answers

Update:

If you want to go directly to the link used in this answer, here is this:

Link: Initial selection in AngularJS ng-options with track

Here is what worked for me:

 app.controller('fooController', function($scope){ $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}]; $scope.user = {}; $scope.user.roles = [ $scope.roles[0] ]; });

An error occurred in the plunger: user not initialized, except that Angular would compare every object in the ng-options array with all elements of the ng-model array. JavaScript comparison is not Angular comparison; comparing two objects with the same properties in JavaScript returns false (different objects).

Plunk: http://plnkr.co/edit/ccsAVvPACnN6Qzje7HcB?p=preview

.

Now this is not perfect. Usually you want to adjust them based on ID or so, otherwise:

In HTML, use track by to tell AngularJS to compare identifiers instead of whole objects:

  <select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles track by role.id" required=""></select>

Then in your controller you can use any object without actually being in the array:

 app.controller('fooController', function($scope){ $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}]; $scope.user = {}; $scope.user.roles = [ {id:1, name:"Administrator"} ]; });

Plunk: http://plnkr.co/edit/NKLXrwqwk36YfhBSXILN?p=preview

Note that I didn’t even need the name property. It’s easy to create a suitable object later, but it really doesn’t need to be matched now, try without it!

.

I wrote a detailed tutorial with an accompanying video about this choice problem and its options. He focused on a single, but multi-select just uses an array of objects, not a single object directly.

Check this out for a better understanding - highly recommended:

Initial selection in AngularJS ng-options with track

.

Let me know in the comments if you are still struggling with this.

+13
source share

if your model is similar to $scope.user.roles = [1]; then your ng-options should be like this

  data-ng-options="role.id as role.name for role in roles"

it will select only ID

if you like data-ng-options="role.name for role in roles" then your model should look like

 $scope.user.roles = [{id:1, name:"Administrator"}];

because he will select the whole object

and in your controller

 $scope.user = {}; //this line should be add

since you are trying to access the roles user property but the user object does not exist, this will also result in an error

here Updated Plunker

here is the updated plunker1 plunker2 for your case of ng-options

you can use ng-init here. check out.

+1
source share

like this

 <body ng-init="role.name = roles[0].name" data-ng-app="role" data-ng-controller="fooController"> <select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select> </body>
0
source share

Your Plunkr has errors. You must define $scope.user = {}; before using it. Then it will work.

Note: only the initial value will be set for the model. If you want the administrator to be highlighted by default, you will have to figure out another way.

0
source share

More articles:


All Articles