CODEWITHSUNDEEP
angularjsangularfire
Bro
Bro

Reputation: 483

How do I get angularFire objects to orderBy with ngRepeat?

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:

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.

Upvotes: 6

Views: 5490

Answers (3)

Fizer Khan
Fizer Khan

Reputation: 92745

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

Upvotes: 5

zs2020
zs2020

Reputation: 54514

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/

Upvotes: 5

Draculater
Draculater

Reputation: 2278

Looks like you are trying to filter over an object which will not work.

Filtering on object map rather than array in AngularJS

If you have control over the format of your data, best practice with angular is : 

var objs = [
{ name : 'Whatever' , has : 'value' , etc : 'etc' },
{ name : 'Whatever' , has : 'value' , etc : 'etc' },
{ name : 'Whatever' , has : 'value' , etc : 'etc' }
]
<div ng-repeat="obj in objs | orderBy : name">...

Upvotes: 2

Related Questions