Search code examples
angularjsangularjs-ng-options

Set selected attribute for single/multi selection with ng-options

It seems that angular's behavior with respected to the selected attribute has changed back and forth with each major version. So I'm just looking for someone to tell me if this is achievable in the 1.5.x release using ng-options rather than ng-repeat.

What I'm trying to do: Have angular create html like the following(so that it can be interpreted by a jquery plugin)

<select multiple="multiple"...>
<option value="abc123" label="Justin" selected="selected">Justin</option>
</select>

I've tried many variations of this

<select ms-multi-listbox multiple="multiple" class="multi-select" 
 id="ym" name="ym" ng-model="groupCtrl.memSelection" 
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id">

with no luck.

the model looks like this:

groupCtrl.memSelection =["abc123"];//inbound from api as is selectableMembers

Here is a plunk I've been playing with (try changing the angular version for added confusion): Plunker

Any ideas are welcome.. I mainly wanted to avoid ng-repeat because it has a lot of overhead in longer lists but obviously slow is better than not working so I'll use it until I learn how to do this with ng-options.

Thanks!

edit: Here is a ng-repeat that achieves the result I want:

<option ng-repeat="mem in groupCtrl.selectableMembers" value="{{mem.id}}" label="{{mem.displayName}}" ng-selected="groupCtrl.memSelection.indexOf(mem.id)>=0">{{mem.displayName}}</option>
enter code here
Solution

  • Be careful when using select as and track by in the same expression. AngularJS API ngOptions

    Your expression for ng-options can't work. Using select as and track by in the same expression evaluates mem.id to mem.id.id. Change the expression to 

    ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id"

    And how you set the selected objects don't look right to me as well. You can not just set the id, you have to set the whole object as selected otherwise your ng-options expression evaluation will also fail. Therefore change your selection to (assuming selectable data is stored in $scope.model as it is in the plunk example).

    $scope.memSelection = [$scope.model[0], $scope.model[1]]

    I have updated the plunk and it works for single and multi selection.

    For more information read AngularJS API ngOptions.