你如何对 AngularFire 集合进行排序？

Question

  $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>

您如何按“标题”对这些内容进行排序？我见过几个类似的问题，但解决方案似乎不起作用，至少在这种情况下是这样。

Answer 1

如果$scope.items 是一个对象数组（如$scope.items = [] 所暗示的那样），您将能够使用角度orderBy filter：

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

但是，将items 设置为数组会产生误导，因为您实际上是将“项目”存储（和检索）为键值对列表，不是 一个数组。在 javascript 中对对象进行排序通常更复杂，但实现您想要的一种方法是自定义过滤器：

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;
  }
});

现在您可以使用过滤器按您的任何item 属性进行排序：

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

这里有一个fiddle 来演示。正如@bennlich 下面指出的那样，您的自定义过滤器可能会在数组转换时停止，然后您可以按照here 的建议使用正常的 orderBy 过滤器。

为了彻底，我应该注意，您还可以使用 Firebase priorities 对“服务器端”进行排序。