我有一个这样的对象:
$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>
如果您检查文档它说,在排序依据的表达可以是一个功能 ,一个字符串或数组 。 因此,一个你需要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>
虽然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>
我有一个在我的博客文章关于这个话题。
无论是其他的答案让你中途有,但不是所有的方式......
你需要创建一个对象转换为这样一个数组你的范围函数:
$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,它不存在。
这里是什么,我认为你试图做一个普拉克
编辑:您还可以将对象“转换”到一个数组并将其存储在$范围,如果你担心的功能,这样做太“贵”,但不应该是一个问题,因为你”重新开发一个客户方应用程序为一个用户,而不是许多用户的服务器应用程序,这意味着你有一个“贵”一点回旋余地。 (这也不会是这样)
首先,你要明白, 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>