在NG-重复对象键顺序 [英] Order by Object key in ng-repeat
本文介绍了在NG-重复对象键顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何订购通过密钥整数？
我有以下对象;
$ scope.data = {
0：{数据：ZERO}，
1：{数据：一}，
2：{数据：两个}，
3：{数据：树}，
5：{数据：十二五}，
6：{数据：六个一}，
10：{数据：10}，
11：{数据：十一}，
12：{数据：十二}，
13：{数据：十三}，
20：{数据：TWENTY}
}
HTML
＆LT; DIV NG重复=（键，值）数据＆GT;
电流输出顺序是 1,10,11,12,13,14,2,20,3,4,5,6
不过，我想 1,2,3,4,5,6,10,11,12,13,14,20
|排序依据：关键
不为我工作。
任何想法？
谢谢！
解决方案
这是选择是使用一个中间过滤器。
普拉克与code段
\r
\r\r
\r VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围）{\r
\r
$ scope.template = {\r
0：{数据：ZERO}，\r
1：{数据：一}，\r
2：{数据：两个}，\r
3：{数据：树}，\r
5：{数据：十二五}，\r
6：{数据：六个一}，\r
10：{数据：10}，\r
11：{数据：十一}，\r
12：{数据：十二}，\r
13：{数据：十三}，\r
20：{数据：TWENTY}\r
}\r
\r
}）;\r
\r
app.filter（'的toArray'，函数（）{返回函数（OBJ）{\r
如果返回OBJ（（OBJ的instanceof对象）！）;\r
返回_.map（OBJ，功能（VAL，键）{\r
返回Object.defineProperty（VAL，'$键'，{__proto__：NULL，值：关键}）;\r
}）;\r
}}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js\"></script>\r
\r
＆LT;机身NG-应用=应用程序NG控制器=MainCtrl＆GT;\r
＆LT; DIV NG重复=（键，值）模板|的toArray |排序依据：关键＆GT; {{键}} {{价值$关键}} {{value.data}}＆LT; / DIV＆GT ;\r
＆LT;身体GT; \r
注：
上面的过滤器需要Underscore.js，如果你不使用它，可以重写过滤器。
How can I order by key as integer?
I have the following Object;
$scope.data = {
"0": { data: "ZERO" },
"1": { data: "ONE" },
"2": { data: "TWO" },
"3": { data: "TREE" },
"5": { data: "FIVE" },
"6": { data: "SIX" },
"10":{ data: "TEN" },
"11": { data: "ELEVEN" },
"12": { data: "TWELVE" },
"13": { data: "THIRTEEN" },
"20": { data: "TWENTY"}
}
HTML:
<div ng-repeat="(key,value) in data">
The current output order is 1,10,11,12,13,14,2,20,3,4,5,6
But I want 1,2,3,4,5,6,10,11,12,13,14,20
| orderBy:key
don't work for me.
Any ideas?
Thanks!
解决方案
An option would be use an intermediate filter.
PLUNK AND Code Snippet
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.template = {
"0": { data: "ZERO" },
"1": { data: "ONE" },
"2": { data: "TWO" },
"3": { data: "TREE" },
"5": { data: "FIVE" },
"6": { data: "SIX" },
"10":{ data: "TEN" },
"11": { data: "ELEVEN" },
"12": { data: "TWELVE" },
"13": { data: "THIRTEEN" },
"20": { data: "TWENTY"}
}
});
app.filter('toArray', function() { return function(obj) {
if (!(obj instanceof Object)) return obj;
return _.map(obj, function(val, key) {
return Object.defineProperty(val, '$key', {__proto__: null, value: key});
});
}});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
<div ng-repeat="(key, value) in template| toArray | orderBy:key">{{key}} : {{value.$key}} : {{value.data}}</div>
<body>
NOTE:
The above filter requires Underscore.js, if you don't use it, can rewrite the filter.
这篇关于在NG-重复对象键顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
