排序值 - 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。因此，你需要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

首先，你要明白，ng:filter和使用数组（项目的有序集合）ng:orderBy工作，但是你想使用它们的对象（项目_un_ordered集合）。一种可能的方法是将所有对象收集到一个数组中，然后在其上继续执行ng-repeat。就像这样：

<ul ng-init="phones = [ 
     {name:'Phone Name 1', dateReleased:'2011-1-09 15:48:24'} 
    , {name:'Phone Name 2', dateReleased:'2012-3-12 15:32:11'} 
    , {name:'Phone Name 3', dateReleased:'2012-2-10 13:53:32'}]; 
    pred = '-dateReleased';" > 
    <li ng-repeat="phone in phones | orderBy:pred"> 
     <p>{{phone.name}}</p> 
     <p>{{phone.dateReleased}}</p> 
    </li> 
</ul> 

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，它不存在。

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

编辑：您也可以“转换”的对象数组并将其存储在$范围，如果你担心的功能，这样做太“贵”，但不应该这不是一个问题，因为你正在为一个用户开发一个客户端应用程序，而不是许多用户的服务器应用程序，这意味着你有一个“昂贵”的小摆动空间。 （它不会反正）

Answer 4

虽然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。