How to select multiple options when preparing a multiple select list in AngularJS

Question

I have the following select list:

<select multiple="multiple" ng-model="userRoles" ng-options="r.id as r.name for r in roles"></select>

The above produces a list of all the available roles. I need to preselect the roles that the user is a member of when presenting the form. I can assign a role to userRoles, but if I try create an array and push the roles associated with the user into that array, none of the items are selected.

I've created a jsBin to let you play with the non-working solution (and hopefully fix it): http://jsbin.com/icoSoj/1/edit?html,js,output

Thanks!

Maxence · Accepted Answer · 2013-09-17 09:25:18Z

1

Your selected values are IDs and not full objects.

As you do r.id as r.name, you need to put IDs into your array and not the full objects.

http://jsbin.com/uFiDuxa/1/edit

answered Sep 17, 2013 at 9:25

Maxence

13.4k4 gold badges32 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bernhard Hofmann Over a year ago

Silly me - I only added the r.id as later to try solve the problem and made a new one for myself. doh

AlwaysALearner · Accepted Answer · 2013-09-17 09:21:46Z

1

Inside ng-options you are specifying ids as values for the options. So you should do:

$scope.userRoles = [
    $scope.roles[1].id,
    $scope.roles[2].id
];

answered Sep 17, 2013 at 9:21

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Collectives™ on Stack Overflow

How to select multiple options when preparing a multiple select list in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related