对ngRepeat - angularJS中的散列对象的值进行排序

Question

我有一个这样的对象：

$scope.phones = new Object();
$scope.phones['id1'] = {
    "name":"Phone Name1",
    "dateReleased":"2012-1-09 15:48:24"
};
$scope.phones['id2'] = {
    "name": "Phone Name2",
    "dateReleased":"2012-3-12 15:32:11"
};
$scope.phones['id3'] = {
    "name": "Phone Name3",
    "dateReleased":"2012-2-10 13:53:32"
};

我正在使用ngRepeat显示此内容。我无法通过dateReleased订购。此外，反向排序也不起作用。我的ngRepeat是这样的：

<li ng-repeat="phone in phones | orderBy:dateReleased:true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>

Answer 1

如果检查documentation，就会发现orderBy中的表达式可以是函数、字符串或数组。因此，您需要dateReleased为字符串：'dateReleased‘

此外，您需要您的电话对象是一个实际的数组。

尝试：

$scope.phones = [{
        "name":"Phone Name1",
        "dateReleased":"2012-1-09 15:48:24"
    },{
        "name": "Phone Name2",
        "dateReleased":"2012-3-12 15:32:11"
    },{
        "name": "Phone Name3",
        "dateReleased":"2012-2-10 13:53:32"
    }];

<li ng-repeat="phone in phones | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>

Answer 2

虽然ngRepeat可以迭代散列对象，例如示例中的$scope.phones，但是内置的orderBy过滤器将不起作用。我相信这是由于对象的存储方式。正如其他人所指出的，您需要将散列转换为数组。虽然您可以使用上面建议的方法完成此操作，但我更喜欢使用自定义筛选器。这使我不必直接更改我的散列，并且让我将过滤器与其他散列一起重用。

yourApp.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

此过滤器将对象转换为标准数组，并按您指定的字段对其进行排序。您可以像使用orderBy一样使用orderObjectBy筛选器，在字段名后面包含一个布尔值，以指定是否应颠倒顺序。换句话说，false是上升的，true是下降的。

<li ng-repeat="phone in phones | orderObjectBy:'dateReleased':true">
  <p>{{phone.name}}</p>
  <p>{{phone.dateReleased}}</p>
</li>

我有一个关于这个话题的post on my blog。

Answer 3

其他两个答案都能帮你找到一部分，但不是全部……

您需要在您的作用域上创建一个函数，将对象转换为一个数组，如下所示：

$scope.phonesArray = function() {
    var result = [];
    angular.forEach($scope.phones, function(phone, id) {
      result.push(phone);
    });
    return result;
};

然后你会调用它，而不是你的ngRepeat中的对象：

<li ng-repeat="phone in phonesArray() | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>

另外:请注意，'dateReleased'是一个字符串，所以它知道从当前项中$eval掉该字符串，否则它将检查父$scope.dateReleased，而父off并不存在。

Here is a plunk for what I think you're trying to do

编辑:如果你担心这样做的函数太“昂贵”，你也可以将对象“转换”为数组并存储在$scope上，但这应该不是问题，因为你正在为一个用户开发客户端应用程序，而不是为许多用户开发服务器应用程序，这意味着你有一点“昂贵”的回旋余地。(无论如何都不会是这样的)