4
  $scope.items = [];
  var ref = new Firebase("https://****.firebaseio.com/");
  var query = ref.limit(5);

  angularFire(query, $scope, "items");

<div ng-repeat="item in items" >
<span>{{item.title}}</span>
</div>

How would you sort these by "title"? I've seen a couple similar questions but the solutions don't seem to work, at least for this situation.

Adi Inbar
  • 12,097
  • 13
  • 56
  • 69
jthomasbailey
  • 410
  • 1
  • 8
  • 19

1 Answers1

4

If $scope.items were an array of objects (as implied by $scope.items = []), you would be able to use the angular orderBy filter:

<!-- This example will NOT work with Firebase -->
<div ng-repeat="item in items | orderBy:'title'">
  <span>{{item.title}}</span>
</div>

However, setting items to an array as you did is misleading, because you are actually storing (and retrieving) your "items" as a list of key value pairs, not an array. Sorting objects in javascript is more complicated in general, but one way to achieve what you want is a custom filter:

app.filter('orderObjectBy', function(){
  return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    var array = [];
    for(var objectKey in input) {
      array.push(input[objectKey]);
    }

    function compare(a,b) {
      if (a[attribute] < b[attribute])
        return -1;
      if (a[attribute] > b[attribute])
        return 1;
      return 0;
    }

    array.sort(compare);
    return array;
  }
});

Now you can use your filter to order by any of your item properties:

<div ng-repeat="item in items | orderObjectBy:'title'">
  <span>{{item.title}}</span>
</div>

Here is a fiddle to demonstrate. As @bennlich noted below, your custom filter could stop at the array conversion and then you could use the normal orderBy filter, as suggested here.

And just to be thorough I should note that you could also sort "server-side" with Firebase priorities.

sparkyspider
  • 13,195
  • 10
  • 89
  • 133
hiattp
  • 2,326
  • 1
  • 20
  • 23
  • 1
    Nope, that doesn't seem to do anything, I don't even get an error when I give it a nonsense value. – jthomasbailey Nov 21 '13 at 00:21
  • Are you storing `items` as an array in firebase? – hiattp Nov 21 '13 at 00:26
  • Yep, using the Firebase PHP library: https://github.com/ktamas77/firebase-php $story = array( 'title' => $title, 'id' => $id ); $response = $fb->set($storyPath, $story); – jthomasbailey Nov 21 '13 at 00:30
  • I'm not familiar with the php library but my guess is you aren't actually storing your `stories` as an array of story objects with "sortable" attributes. If you could post a screenshot or some representation of the data from your forge it would be easier to tell. If you can't sort it with a normal angular filter you'll have to [write your own](http://stackoverflow.com/questions/14478106/angularjs-sorting-by-property) or sort it with firebase [priorities](https://www.firebase.com/docs/ordered-data.html). – hiattp Nov 21 '13 at 00:35
  • Ah, I don't think I know how to give them sortable attributes and I don't think Firebase PHP can do setpriority, here's a shot: http://imgur.com/QZ7tkpQ EDIT: better shot: http://imgur.com/q4DcRvX – jthomasbailey Nov 21 '13 at 00:42
  • Ok so yeah that isn't an array, you'll probably want to make your own filter or restructure the data. Also, since you are using angularfire, you might not need the php library at all. – hiattp Nov 21 '13 at 01:04
  • There's also [this](https://github.com/angular/angular.js/issues/1286#issuecomment-14303275) method: a filter that converts to an array, followed by the normal orderBy filter. – bennlich Nov 21 '13 at 09:00
  • @Spider since you can store arrays I'm not sure it is accurate to say that the first example "will not work with Firebase." It just depends on the object type you are retrieving. – hiattp Feb 21 '14 at 18:42