How to sort object data source in ng-repeat in AngularJS?

Question

Suppose I have the following users:

$scope.users = {
  "2": {
    email: '[email protected]',
    name: 'John'
  },
  "3": {
    email: '[email protected]',
    name: 'Elisa'
  }
}

I would like to create a <select> with the following options:

<option value="3">Elisa</option>
<option value="2">John</option>

In other words, users should be sorted by name.

I tried the following using the (key, value) in expression syntax, but it doesn't work:

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
        value="{{ user.id }}">
  {{ user.name }}
</option>

Live example here.

What am I missing?

Please do not suggest solutions with ng-options as I use ui-select2 which is incompatible with ng-options.

We don't need two new tags for this question and this question only. Please do the tags a favor by adding an appropriate wiki and adding them to other relevant questions. If you can't find other questions for the tags, then they don't need to exist twice over... — Charles
– Charles, Commented Feb 21, 2013 at 9:23
ng-repeat and orderBy are very common things in AngularJS. I believe there will be much more questions regarding these two. But ,anyway, I added these tags to some other questions. — Misha Moroshko
– Misha Moroshko, Commented Feb 21, 2013 at 10:01
Since I lack the reputation to formally suggest tag alternate spellings, someone else on here should add angularjs-order-by. It seems nonsensical that the camel cased ngRepeat would become ng-repeat, while orderBy becomes orderby. — maurice
– maurice, Commented Jun 15, 2015 at 16:57
A simple example : sforsuresh.in/angularjs-ng-repeat-sorting-data-using-dropdown — Suresh Kamrushi
– Suresh Kamrushi, Commented Mar 3, 2016 at 13:15

Andresch Serj · Accepted Answer · 2014-03-10 14:55:56Z

56

While you would see this in the thread the author's answer references in a link, I thought it would be good to put up one of the mentioned workarounds up on SO:

It is true that this is technically not implemented, but there is an easy work around if you're willing to change your data model slightly: use a custom filter to generate an array of the object's properties (without replacement). If you add the key field to the objects ("id" in the above case), you should be able to get the behavior your looking for:

app.filter("toArray", function(){
    return function(obj) {
        var result = [];
        angular.forEach(obj, function(val, key) {
            result.push(val);
        });
        return result;
    };
});
...

$scope.users = {
    1: {name: "John", email: "[email protected]", id: 1},
    2: {name: "Elisa", email: "[email protected]", id: 2}
};

Here's the ng-repeat directive that could be used:

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>

And here's the plunkr.

Notice that the orderBy filter takes name as its parameter and not user.name.

Unfortunately, adding the id property to your objects does create potential for mismatch with it's key in the containing object.

In the link you mentioned in your answer, there are also proposed solutions that create the id property in the user objects on the fly, but I feel like this approach is a little less messy (at the cost of introducing data replication).

edited Mar 10, 2014 at 14:55

Andresch Serj

37.8k16 gold badges63 silver badges106 bronze badges

answered Sep 22, 2013 at 0:17

mhess

1,36414 silver badges12 bronze badges

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

3 Comments

ak85 Over a year ago

@BarthZalewski This looks good however how come if I try to reverse the filter nothing changes? can you handle reverse i n cuh as a situation? ng-repeat="user in users | toArray | orderBy:'name' : reverse"

Robbie Smith Over a year ago

This works too when using the (key, value) in users approach too. Well done!

Doug Over a year ago

In response to @ak85's question you would use ng-repeat="user in users | toArray | orderBy:'name' : true" to reverse the list. Boolean true identifies a reverse order.

Misha Moroshko · Accepted Answer · 2013-02-19 10:33:37Z

9

OK, I found the answer:

It is not implemented yet :(

answered Feb 19, 2013 at 10:33

Misha Moroshko

172k231 gold badges521 silver badges762 bronze badges

1 Comment

mhess Over a year ago

It might also be worth mentioning that there are no plans to implement it either according to the thread you cite.

Saksham · Accepted Answer · 2016-01-21 13:38:14Z

0

Adding to the accepted answer and seeing your data format, you should transform your data as

app.filter('myFilterUsers',function(){
    return function(data)
    {
        var newRes = [];
        angular.forEach(data,function(val,key){
            val["id"] = key;  //Add the ID in the JSON object as you need this as well.
            newRes.push(val);
        });
        return newRes;
    }
});

answered Jan 21, 2016 at 13:38

Saksham

9,4209 gold badges48 silver badges75 bronze badges

Collectives™ on Stack Overflow

How to sort object data source in ng-repeat in AngularJS?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related