How do I get angularFire objects to orderBy with ngRepeat?

Question

The current bunch of data in my firebase looks something like:

{"-JZ7b":{"name":"bob","has":"slack"},"-JZ7a":{"name":"connie","has":"slack"}}

If I use something like:

<ul><li ng-repeat="(key, person) in people |orderBy 'name'"></li></ul>

I get:

• -JZ7a connie has slack
• -JZ7b bob has slack

here's a fiddle

What is the best way to get the expected orderBy without changing my data into some other format? I realize that in this example the keys aren't exactly meaningful but, assume they are. The idea of a building a custom directive seems like an interesting option but, my code can be a bit jangly compared to the original.

Answer 1

OrderBy doesn't apply to objects. You can use the filter toArray.

<li ng-repeat="p in people | toArray | orderBy: 'name'" ng-click="cpSelect(p.$key)">
    {{p.$key}} {{p.name}} has {{p.has}}
</li>

Demo: http://jsfiddle.net/62exD/

Answer 2

You can use orderByPriority to convert firebase objects into array and then apply normal filter and orderBy.

 <ul>
   <li ng-repeat="person in people | orderByPriority | orderBy: 'name'">
     <span>{{ person.$id }} </span>
   </li>
 </ul>

Refer orderbypriority https://www.firebase.com/docs/angular/reference.html#orderbypriority