AngularJS按属性排序
AngularJS按属性排序
提问于 2013-01-23 19:02:24
我正在尝试做的是按属性对一些数据进行排序。这里有一个例子，我认为它应该工作，但它不是。
HTML部件：
<div ng-app='myApp'>
<div ng-controller="controller">
<ul>
<li ng-repeat="(key, value) in testData | orderBy:'value.order'">
{{value.order}}. {{key}} -> {{value.name}}
</li>
</ul>
</div>
</div>JS部分：
var myApp = angular.module('myApp', []);
myApp.controller('controller', ['$scope', function ($scope) {
$scope.testData = {
C: {name:"CData", order: 1},
B: {name:"BData", order: 2},
A: {name:"AData", order: 3},
}
}]);结果是：
- A -> AData
- B -> BData
- C -> CData
..。该IMHO应如下所示：
- C -> CData
- B -> BData
- A -> AData
我是不是错过了什么(这里是准备好的JSFiddle实验)？
回答 10
Stack Overflow用户
回答已采纳
发布于 2013-08-12 20:26:06
AngularJS的orderBy过滤器只支持数组-没有对象。因此，您必须编写一个自己的小过滤器，它会为您执行排序。
或者更改您处理的数据格式(如果您对此有影响的话)。包含对象的数组可通过本机orderBy筛选器进行排序。
以下是适用于AngularJS的orderObjectBy过滤器：
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]);
}
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});
return array;
}
});视图中的使用情况：
<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
//...
</div>在本例中，对象需要一个position属性，但您可以灵活地在对象中使用任何属性(包含一个整数)，只需根据视图中的定义即可。
JSON示例：
{
"123": {"name": "Test B", "position": "2"},
"456": {"name": "Test A", "position": "1"}
}这里有一个小提琴，它向你展示了用法：http://jsfiddle.net/4tkj8/1/
Stack Overflow用户
发布于 2013-12-05 19:07:01
这很简单，就像这样做
$scope.props = [{order:"1"},{order:"5"},{order:"2"}]
ng-repeat="prop in props | orderBy:'order'"Stack Overflow用户
发布于 2013-09-06 01:22:30
不要忘记parseInt()只对Integer值有效。要对字符串值进行排序，您需要交换以下内容：
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});有了这个：
array.sort(function(a, b){
var alc = a[attribute].toLowerCase(),
blc = b[attribute].toLowerCase();
return alc > blc ? 1 : alc < blc ? -1 : 0;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14478106
复制相关文章
相似问题