AngularJS - How to orderBy the value of an array-like object in an ng-repeat

Question

I have an object that looks like this:

{
    "03" : "Apple",
    "02" : "Banana",
    "01" : "Cranberry"
}

and it orders it by the keys (which makes sense) in my ng-repeat. This results in the labels being out of alphabetical order ("cranberry" being first). How do I make it so that it orders my repeater by the values (alphabetically)?

I can supply it in the order I want to the ng-repeat, but it sorts it by the key. If I could make it not do that, then that would also work.

Is there anything stops you from sorting the data in controller? — Ye Liu
– Ye Liu, Commented May 29, 2013 at 21:35
I don't know the answer, but i do know that supplying the object pre-sorted won't work, because JS engines are not obliged to maintain the order of properties in an object. — IMSoP
– IMSoP, Commented May 29, 2013 at 21:36

ardentum-c · Accepted Answer · 2013-05-29 21:37:20Z

28

To sort array in ngRepeat you can use orderBy filter but it works only with arrays, so you should use array in ngRepeat.

It will be something like this in controller:

$scope.myData = [
    {
        key:    "01",
        value:  "Cranberry"
    },
    {
        key:    "02",
        value:  "Banana"
    },
    {
        key:    "03",
        value:  "Apple"
    }
];

and in html:

<div class="item" ng-repeat="item in myData|orderBy:'value'">{{item.value}}</div>

answered May 29, 2013 at 21:37

ardentum-c

1,41013 silver badges11 bronze badges

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

2 Comments

ardentum-c Over a year ago

But if you realy want to use object in scope you can create a filter that convert an object into array.

Kevin Beal Over a year ago

There was no particular need to use an object so I used the method you suggested and it's working great. Thank you :)

Collectives™ on Stack Overflow

AngularJS - How to orderBy the value of an array-like object in an ng-repeat

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related