AngularJS multi-select using ng-repeat

Question

I'm new to AngularJS and JavaScript. I've come up with a way to build a multi-select list, which is working. The ng-model associated with the dropdown is part of a "user" DTO object, specifically a member which contains an array of "groups" the user can belong to. The "master list" of possible groups are read from a database table using a webservice, put in an array and this is what's used to build the dropdown when the page is displayed.

Those elements in the list that are included in the "groups" field of the user object are displayed below the dropdown in a "preview" field. That's all working - if a user has two selected groups, they come up in that pre-field when the page is populated... but I don't understand why these groups are not highlighted in the dropdown. Sometimes they are...like sometimes when I refresh the page, but most of the time when the page is displayed and populated from the user information, these groups contained in the user are not highlighted in the dropdown.

Here's how the code is set up (again, I'm new to AngularJS/JavaScript and webservices so bear with me).

The HTML code is like this:

<div class="form-group">
    <label for="Groups" class="col-sm-2 control-label">Group Memberships: </label>
    <div class="col-sm-10">
        <select name="userGroups" id="userGroups" ng-model="user.userGroups" multiple style="width: 300px;">
            <option ng-repeat="group in approverGroups" value="{{group.name}}" selected >{{group.name}}</option>
        </select>
        <pre>{{user.userGroups.toString()}}</pre>
    </div>
</div>

The JavaScript side looks like this. The "get" is used to read all possible groups from a table, and that populates the dropdown:

    $http({
        method : 'GET',
        url : '/pkgAART/rs/ApproverGroupService/approvergroups',
        data : {
            applicationId : 3
        }
    }).success(function(result) {
        // Create an array from the groups for use
        // in the multi-select UI component for groups
        var arr = [];
        for (var i = 0; i < result.approvergroup.length; i++) {
            var id = result.approvergroup[i].approverGroupId;
            var value = result.approvergroup[i].name;
            var pair = {id : id, name : value };
            arr.push(pair);
        }
        $scope.approverGroups = arr;
    });

Here's a screenshot of the page. This is how it looks:

So again, it works, and "SOMETIMES" when I pull up the page, the items listed in the lower <pre> box are actually highlighted in the dropdown, but not often. I don't understand how to ensure they come up highlighted. In the picture I manually clicked these elements. But if I refresh the page, sometimes they are and sometimes they are not.

markmalin · Accepted Answer · 2016-02-18 16:39:19Z

I think I figured it out. Per Peter's suggestion I changed to ng-options for the dropdown, but modified the array that I use as my options to just use the name string. Here's the HTML

<div class="form-group">
    <label for="Groups" class="col-sm-2 control-label">Group Memberships:   </label>
    <div class="col-sm-10">
        <select name="userGroups"
                id="userGroups" 
                ng-model="user.userGroups" 
                multiple="true" 
                style="width: 300px;" 
                ng-options="group for group in approverGroups">
        </select>
        <pre>{{user.userGroups.toString()}}</pre>               
    </div>
</div>

and the js file that builds up the array of strings looks like this:

$http({
    method : 'GET',
    url : '/pkgAART/rs/ApproverGroupService/approvergroups',
    data : {
        applicationId : 3
    }
}).success(function(result) {
// create an array from the groups for use
// in the multi-select UI component for groups
    var arr = [];
    for (var i = 0; i < result.approvergroup.length; i++) {
        var value = result.approvergroup[i].name;
        arr.push(value);            
    }
    $scope.approverGroups = arr;            
});

It's now showing the multi-select list's items as selected if they are contained in "user.userGroups"

Mark

Mr Lister · Accepted Answer · 2016-02-25 20:08:41Z

0

I think I figured it out.

First off, you should use ng-options in the select instead of ng-repeat on <option>. This makes it so the options are bound to the model of the select.

Check out this fiddle: http://jsfiddle.net/mcxqjngm/3/

Here is the relevant select html:

<select 
name="userGroups" 
id="userGroups" 
ng-model="user.userGroups" 
multiple="true" 
style="width: 300px;" 
ng-options="group.name for group in approverGroups track by group.id">
</select>

The button mimics an ajax call. I gotta run, but I can answer questions in a bit.

edited Feb 25, 2016 at 20:08

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Feb 18, 2016 at 1:55

Patrick

1511 gold badge3 silver badges8 bronze badges

1 Comment

markmalin Over a year ago

Thanks. Actually, when I use your, it assigns an array of Objects to "user.userGroups". user.userGroups, which is the model, actually needs to end up an array of strings (e.g. "Michigan", "Texas", "Florida"). Instead it's ending up an array of objects which correspond to the "$scope.approverGroups" that I had built up in the code above. So if I select "Texas" and "Florida", user.userGroups ends up with an array of size 2, containing Object {id : 10001, name : "Texas"} and Object {id : 10002, name : "Florida"}. I need it to just stuff the strings "Texas" and "Florida" in user.userGroups.

Collectives™ on Stack Overflow

AngularJS multi-select using ng-repeat

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related