json Angular - 无法使 ng-repeat orderBy 工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19387552/
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
Angular - Can't make ng-repeat orderBy work
提问by Luke SpringWalker
I've tried many examples of ng-repeat with orderBy, but I can't make my json work with it.
我已经用 orderBy 尝试了很多 ng-repeat 的例子，但我无法让我的 json 使用它。
<div ng-app>
<script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<div ng:controller="Main">
<div ng-repeat="release in releases| orderBy:'environment_id'">
{{release.environment_id}}
</div>
</div>
</div>
And the JSON
和 JSON
function Main($scope) {
$scope.releases = {
"tvl-c-wbap001 + tvl-webapp": {
"timestamp": " 05:05:53 PM ",
"environment_id": "CERT5",
"release_header": "Projects/Dev",
"date": "19 Oct",
"release": "12.11.91-1"
},
"tvl-c-wbap401 + tvl-webapp": {
"timestamp": " 10:07:25 AM ",
"environment_id": "CERT4",
"release_header": "Future Release",
"date": "15 Oct",
"release": "485-1"
},
"tvl-c-wbap301 + tvl-webapp": {
"timestamp": " 07:59:48 AM ",
"environment_id": "CERT3",
"release_header": "Next Release",
"date": "15 Oct",
"release": "485-1"
},
"tvl-c-wbap201 + tvl-webapp": {
"timestamp": " 03:34:07 AM ",
"environment_id": "CERT2",
"release_header": "Next Changes",
"date": "15 Oct",
"release": "13.12.3-1"
},
"tvl-c-wbap101 + tvl-webapp": {
"timestamp": " 12:44:23 AM ",
"environment_id": "CERT1",
"release_header": "Production Mirror",
"date": "15 Oct",
"release": "13.11.309-1"
},
"tvl-s-wbap002 + tvl-webapp": {
"timestamp": " 12:43:23 AM ",
"environment_id": "Stage2",
"date": "15 Oct",
"release": "13.11.310-1"
},
"tvl-s-wbap001 + tvl-webapp": {
"timestamp": " 11:07:38 AM ",
"environment_id": "Stage1",
"release_header": "Production Mirror",
"date": "11 Oct",
"release": "13.11.310-1"
},
"tvl-p-wbap001 + tvl-webapp": {
"timestamp": " 11:39:25 PM ",
"environment_id": "Production",
"release_header": "Pilots",
"date": "14 Oct",
"release": "13.11.310-1"
},
"tvl-p-wbap100 + tvl-webapp": {
"timestamp": " 03:27:53 AM ",
"environment_id": "Production",
"release_header": "Non Pilots",
"date": "11 Oct",
"release": "13.11.309-1"
}
}
It doesn't matter what I write, I always get the same order, or I may say, no order at all.
不管我写什么，我总是得到相同的顺序，或者我可以说，根本没有顺序。
回答by tymeJV
The orderByonly works with Arrays -- See http://docs.angularjs.org/api/ng.filter:orderBy
该orderBy只适用于阵列-见http://docs.angularjs.org/api/ng.filter:orderBy
Also a great filter to use for Objects instead of Arrays @ Angularjs OrderBy on ng-repeat doesn't work
还有一个很好的过滤器用于对象而不是数组@Angularjs OrderBy on ng-repeat 不起作用
回答by Eike Thies
As mentioned, only arrays are allowed. But to make it simple for you, you could dynamically convert the object into an array via a piping function as seen here https://gist.github.com/brev/3949705
如前所述，只允许使用数组。但为了让您更简单，您可以通过管道函数将对象动态转换为数组，如下所示 https://gist.github.com/brev/3949705
Just declare the filter, and add it to ng-repeat :)
只需声明过滤器，并将其添加到 ng-repeat :)
<div ng-app="myApp">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="Main">
<div ng-repeat="release in releases | object2Array | orderBy:'environment_id'">{{release.environment_id}}</div>
</div>
<script>
var app = angular.module('myApp', []).filter('object2Array', function() {
return function(input) {
var out = [];
for(i in input){
out.push(input[i]);
}
return out;
}
})
.controller('Main',function ($scope) {
$scope.releases = {"tvl-c-wbap001 + tvl-webapp":{"timestamp":" 05:05:53 PM ","environment_id":"CERT5","release_header":"Projects/Dev","date":"19 Oct","release":"12.11.91-1"},"tvl-c-wbap401 + tvl-webapp":{"timestamp":" 10:07:25 AM ","environment_id":"CERT4","release_header":"Future Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap301 + tvl-webapp":{"timestamp":" 07:59:48 AM ","environment_id":"CERT3","release_header":"Next Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap201 + tvl-webapp":{"timestamp":" 03:34:07 AM ","environment_id":"CERT2","release_header":"Next Changes","date":"15 Oct","release":"13.12.3-1"},"tvl-c-wbap101 + tvl-webapp":{"timestamp":" 12:44:23 AM ","environment_id":"CERT1","release_header":"Production Mirror","date":"15 Oct","release":"13.11.309-1"},"tvl-s-wbap002 + tvl-webapp":{"timestamp":" 12:43:23 AM ","environment_id":"Stage2","date":"15 Oct","release":"13.11.310-1"},"tvl-s-wbap001 + tvl-webapp":{"timestamp":" 11:07:38 AM ","environment_id":"Stage1","release_header":"Production Mirror","date":"11 Oct","release":"13.11.310-1"},"tvl-p-wbap001 + tvl-webapp":{"timestamp":" 11:39:25 PM ","environment_id":"Production","release_header":"Pilots","date":"14 Oct","release":"13.11.310-1"},"tvl-p-wbap100 + tvl-webapp":{"timestamp":" 03:27:53 AM ","environment_id":"Production","release_header":"Non Pilots","date":"11 Oct","release":"13.11.309-1"}}
});
</script>
回答by Julian Mosquera
the built-in orderBy filter will no longer work when iterating an object. It's ignored due to the way that object fields are stored. You need create a custom filter
迭代对象时，内置的 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;
};
});
<ul>
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
</ul>
回答by nderoche
in Eike Thies's response above, if we use underscore.js, filter could be simplified to :
在上面 Eike Thies 的回复中，如果我们使用 underscore.js，过滤器可以简化为：
var app = angular.module('myApp', []).filter('object2Array', function() {
return function(input) {
return _.toArray(input);
}
});
回答by Tom S?derlund
Here's a version of @Julian Mosquera's code that also supports sorting by object key:
这是@Julian Mosquera 代码的一个版本，它也支持按对象键排序：
yourApp.filter('orderObjectBy', function () {
return function (items, field, reverse) {
// Build array
var filtered = [];
for (var key in items) {
if (field === 'key')
filtered.push(key);
else
filtered.push(items[key]);
}
// Sort array
filtered.sort(function (a, b) {
if (field === 'key')
return (a > b ? 1 : -1);
else
return (a[field] > b[field] ? 1 : -1);
});
// Reverse array
if (reverse)
filtered.reverse();
return filtered;
};
});
回答by serdarsenay
orderby works on arrays that contain objects with immidiate values which can be used as filters, ie
orderby 适用于包含具有 immidiate 值的对象的数组，这些对象可以用作过滤器，即
controller.images = [{favs:1,name:"something"},{favs:0,name:"something else"}];
When the above array is repeated, you may use | orderBy:'favs' to refer to that value immidiately, or use a minus in front to order descending
当上述数组重复时，可以使用 | orderBy:'favs' 立即引用该值，或在前面使用减号以降序排列
<div class="timeline-image" ng-repeat="image in controller.images | orderBy:'-favs'">
<img ng-src="{{ images.name }}"/>
</div>
回答by CJ Cenizal
You're going to have to reformat your releases object to be an arrayof objects. Then you'll be able to sort them the way you're attempting.
您将不得不将您的发布对象重新格式化为一个对象数组。然后，您将能够按照您尝试的方式对它们进行排序。
