Order values in select choices in alphabetical order

Question

I've searched online and tried a few solutions which rely on orderBy but unfortunately it has not been successful. I have a drop down box and would like the values to be in alphabetical order as I have the same name and would therefore like them to be above/below each other. My code is the following and wit hit it shows the orderBy method:

<div class="col-lg-6 col-sm-6 col-xs-6">
    <!--reach-infinity="refreshUsers($select.search)"-->
    <ui-select ng-model="user.selected"
               ng-keyup="refreshUsers($select.search)"
               on-select="onUserLoginChange($select.selected)"
               ng-show="true"
               theme="bootstrap" style="min-width: 300px;">
        <ui-select-match class="ui-select-match"
                         placeholder="Enter user login">{{$select.selected.loginName}}</ui-select-match>
        <ui-select-choices class="ui-select-choices"
                           repeat="user in usersList track by $index | orderBy:'loginName'">
            <div ng-bind-html="user.loginName | highlight: $select.search"></div>
            <small>
                clientName: {{user.clientName}}
            </small>
            <div ng-if="$index == $select.items.length-1">
                <button
                        ng-if="!useNgMouseover"
                        class="btn btn-xs btn-blue"
                        style="width: 100%; margin-top: 5px;"
                        ng-click="loadMoreUsers($select, $event);"
                        ng-show="moreUsers"
                        ng-disabled="isLoading">Load more...
                </button>
            </div>
        </ui-select-choices>
    </ui-select>
    <span ng-show="userDetailsForm.$dirty && !userLoginFound" class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

score 0 · Answer 1 · answered Dec 14 '18 at 11:58

0

orderBy only work with Arrays so you must be using it with object, so i think you should use it on array.

Create a array first then apply orderBy on it.

answered Dec 14 '18 at 11:58

Faiz Khan

288
1
9

Math · Accepted Answer · 2018-12-14T14:17:29.627

0

You could also create a function in your scope and call it from the repeat attribute:

In the controller:

$scope.orderByLoginName = function(userList) {
    // Order the list here
    return orderedList;
}

In the html:

<ui-select-choices class="ui-select-choices"
                   repeat="user in orderByLoginName(usersList) track by $index">

EDIT :

Here is an exemple of one way to sort your array by using Array.prototype.sort():

$scope.orderByLoginName = function(userList) {
    return userList.sort(function(a, b){
        return a.loginName.localeCompare(b.loginName);
    })
}

See this post for more informations about this solution.

edited Dec 14 '18 at 14:17

answered Dec 14 '18 at 12:19

Math

38
1
1
7

Regarding the order list here comment, what would I type? Just a for loop or something like that? – Robert McGregor Dec 14 '18 at 13:50
You can indeed make use of a for loop with your own logic. I edited the answer to put an example of an other way of doing it. – Math Dec 14 '18 at 14:20

Order values in select choices in alphabetical order

2 Answers2