我正在尝试遍历JSON响应并按对象中的另一个键值对(顺序对象值)进行排序,但看起来现在对我来说很有效。
我可以用到目前为止我无法想到的另一种方式重新格式化对象吗?
我有什么可以在Angular中做的吗?
的HTML
<div ng-app="myApp" ng-controller="Ctrl">
<div ng-repeat="item in myCards">
<h1>Title: {{item.title}}</h1>
<div ng-repeat="(blockName, majorBlock) in item.blocks | orderBy:'order'">
<h2>Name: {{blockName}}, Order: {{majorBlock.order}}</h2>
</div>
</div>
</div>
JS
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.myCards = {
template: {
tagline: 'Tagline',
url: 'url',
title: 'My Title',
blocks: {
'cover': {
"coverUrl": "http://www.url.com/cover/",
"coverImage": "http://www.url.com/cover/",
"order": '1'
},
'text': {
"headerText": "amet anim est eu enim in incididunt cillum reprehenderit proident",
"order": '2'
},
'products_block': {
'order': '3'
}
}
}
};
});
小提琴:http://jsfiddle.net/fvdb3d3p/
我使用orderByArray插件尝试了一些技巧,但它们打破了循环的其余部分。
最佳答案
问题是$scope.myCards.template.blocks
是对象,而不是Array
,您可以使用ng-repeat
迭代对象,但是过滤器orderby
仅适用于数组,如您在API文档中所见:https://docs.angularjs.org/api/ng/filter/orderBy
您可能要为此编写一个自定义过滤器。
编辑:
我从以下位置找到了一个名为“ orderObjectBy
”的自定义过滤器:
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;
};
});
编辑:
我已经调整了原始的过滤器功能,以便可以访问对象的
key
,调整后的版本如下所示:.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item, key) {
item.originalKey = key;
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
})
例如:http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/
关于javascript - orderBy无法按预期工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25705475/