在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

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

此过滤器将对象转换为标准数组,并按指定的字段对其进行排序.您可以使用与orderObjectBy过滤器完全相同的过滤器orderBy,包括字段名称后面的布尔值,以指定是否应该颠倒顺序.换句话说,false是提升,true是下降.

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

我的博客上有关于此主题的帖子.

Answer 2

如果您查看文档,则说明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>