javascript AngularJs ng-repeat orderBy 不适用于嵌套对象属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27779082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs ng-repeat orderBy not working for nested object properties
提问by ?V?
I,m trying to ng-repeat nested object properties and order them, but the ordering isn't working for me.
我正在尝试重复嵌套对象属性并对其进行排序，但排序对我不起作用。
I've seen this: How to orderby in AngularJS using Nested property
我已经看到了： How to orderby in AngularJS using Nested property
but the json structure is different and i couldn't get it to work.
但 json 结构不同，我无法让它工作。
My code:
我的代码：
<div ng-repeat="item in data | orderBy:order.allListPosition">
<div>{{item.name}} - {{item.order}}</div>
</div>
The scope:
范围：
$scope.data = {
"78962": {
"id": "78962",
"name": "item 2",
"type": "blind",
"order": {
"allListPosition": "008",
"catListPosition": "059"
},
"data": {
"status": "stop",
"percent": 20
},
"longPress": {
"item": "78966",
"active": true
}
},
"78963": {
"id": "78963",
"name": "item 3",
"type": "coolmaster",
"order": {
"allListPosition": "053",
"catListPosition": "001"
},
"data": {
"status": 1,
"temp": 16,
"point": 25,
"mode": "cool",
"fan": 3
},
"longPress": {
"item": "78966",
"active": false
}
}
};
Can anyone please show me what am i doing wrong?
谁能告诉我我做错了什么？
Thank's alot
非常感谢
Avi
阿维
回答by JLRishe
There are two reasons orderByisn't working here:
有两个原因orderBy在这里不起作用：
orderByonly works on arrays, but you are applying it to a plain object.- To order by an expression, you need to give
orderBya string value with the expression. You are giving itorder.allListPosition, which would equate to$scope.order.allListPosition(which doesn't exist).
orderBy仅适用于数组，但您将其应用于普通对象。- 要按表达式排序，您需要为表达式提供
orderBy一个字符串值。你给了它order.allListPosition，这相当于$scope.order.allListPosition（不存在）。
To solve the first issue, add an array of your data objects:
要解决第一个问题，请添加一个数据对象数组：
$scope.dataArray = Object.keys($scope.data)
.map(function(key) {
return $scope.data[key];
});
To solve the second issue (and incorporate the dataArrayfrom above):
解决第二个问题（并结合dataArray上面的内容）：
<div ng-repeat="item in dataArray | orderBy:'order.allListPosition'">
回答by nanndoj
You can create a custom filter to order by neasted properties.
您可以创建自定义过滤器以按嵌套属性排序。
myApp.filter('customorder', function() {
return function(items) {
items.sort(function(a,b){
// Make sure we are comparing integers
var aPos = parseInt(a.order.allListPosition);
var bPos = parseInt(b.order.allListPosition);
// Do our custom test
if (aPos > bPos ) return 1;
if (aPos < bPos) return -1;
return 0;
})
}
});
Your html will look like
你的 html 看起来像
<div ng-repeat="item in data | customorder">
<div>{{item.name}} - {{item.order}}</div>
</div>
You should always think that angular is not a restritive language. the filters you normally use are built in filters. But you can have fun with your own filter as soon as you need!
您应该始终认为 angular 不是一种限制性语言。您通常使用的过滤器内置过滤器。但是您可以根据需要尽快使用自己的过滤器！
回答by Omri Aharon
Your dataobject is an object of objects, and not an array of objects.
您的data对象是对象的对象，而不是对象的数组。
Therefore, orderBywon't work since it is only compatible with arrays.
因此，orderBy不会工作，因为它只与数组兼容。
I have updated your dataobject to make it work:
我已更新您的data对象以使其工作：
$scope.data = [
{
"id": "78961",
"name": "item 1",
"type": "blind",
"order":{allListPosition:"093",catListPosition: "009"},
"data": {
"status": "up",
"percent": 80
},
"longPress": {
"item": "78966",
"active": true
}
},
{
"id": "78962",
"name": "item 2",
"type": "blind",
"order":{allListPosition:"008",catListPosition: "059"},
"data": {
"status": "stop",
"percent": 20
},
"longPress": {
"item": "78966",
"active": true
}
},
{
"id": "78963",
"name": "item 3",
"type": "coolmaster",
"order":{allListPosition:"053",catListPosition: "001"},
"data": {
"status": 1,
"temp": 16,
"point": 25,
"mode": "cool",
"fan": 3
},
"longPress": {
"item": "78966",
"active": false
}
}];
And in HTML:
在 HTML 中：
<div ng-repeat="item in data | orderBy:'order.allListPosition'">
<div>{{item.name}} - {{item.order}}</div>
</div>
回答by Helena
I'm pretty sure this should be:
我很确定这应该是：
<div ng-repeat="item in dataArray | orderBy:'item.order.allListPosition'">
<div ng-repeat="item in dataArray | orderBy:'item.order.allListPosition'">
