javascript 在 Angular JS 中跳过 ng-repeat JSON 排序
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19287716/
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
Skip ng-repeat JSON ordering in Angular JS
提问by Aswin Ramakrishnan
Does anybody know how I can SKIPJSON ordering altogether when I use ng-repeat (in a painless way probably)?
有谁知道当我使用 ng-repeat 时如何完全跳过JSON 排序(可能以一种无痛的方式)?
For example, my source JSON looks something like this -
例如,我的源 JSON 看起来像这样 -
{
"title": "Title",
"description": "Description",
"moreInfo": "Moreinformation"
}
Once I use it in ng-repeat, it orders them alphabetically. Something like this -
一旦我在 ng-repeat 中使用它,它就会按字母顺序排列它们。像这样的东西——
{
"description": "Description",
"moreInfo": "Moreinformation",
"title": "Title"
}
My ng-repeat looks something like this -
我的 ng-repeat 看起来像这样 -
<div ng-repeat="(key,data) in items">
<span class="one"> {{key}} </span>
<span class="two"> {{data}} </span>
</div>
I've seen people having a separate array of the keys and using them to identify the JSON objects, ultimately avoiding alphabetical sorting.
我见过有人拥有一个单独的键数组并使用它们来识别 JSON 对象,最终避免了按字母顺序排序。
Is there an elegant way to do this?
有没有一种优雅的方法来做到这一点?
回答by Cherniv
Nice workaround found at google groups:
在 google 群组中找到了不错的解决方法:
<div ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
<pre>
key: {{key}}
value: {{value}}
</pre>
</div>
And in scope:
在范围内:
$scope.data = {
'key4': 'data4',
'key1': 'data1',
'key3': 'data3',
'key2': 'data2',
'key5': 'data5'
};
$scope.notSorted = function(obj){
if (!obj) {
return [];
}
return Object.keys(obj);
}
Working: http://jsfiddle.net/DnEXC/
工作:http: //jsfiddle.net/DnEXC/
Original: https://groups.google.com/forum/#!topic/angular/N87uqMfwcTs
原文:https: //groups.google.com/forum/#!topic/angular/ N87uqMfwcTs
回答by angelokh
This answer using filter works best for me.
这个使用过滤器的答案最适合我。
https://groups.google.com/d/msg/angular/N87uqMfwcTs/EGoY6O2gtzsJ
https://groups.google.com/d/msg/angular/N87uqMfwcTs/EGoY6O2gtzsJ
angular.module('myFilters', [])
.filter('keys', function() {
return function(input) {
if (!input) {
return [];
}
return Object.keys(input);
}
});
You can use like this:
你可以这样使用:
<div ng-repeat="key in data | keys" ng-init="value = data[key]"></div>
回答by Slavo Vojacek
I am using this approach to override the alphabetical ordering:
我正在使用这种方法来覆盖字母顺序:
Controller:
控制器:
$scope.steps = {
"basic-settings": "Basic Settings",
"editor": "Editor",
"preview-and-publish": "Preview & Publish"
};
// NOTE I realise this is a hacky way, but I need to override JS's alphabetical ordering
$scope.stepsKeys = _.keys($scope.steps);
$scope.activeStep = 0;
PLEASE NOTE that _.keys($scope.steps); is LoDashsubstituting Object.keys();
请注意 _.keys($scope.steps); 是LoDash替代 Object.keys();
HTML:
HTML:
<ul>
<li ng-repeat="key in stepsKeys" ng-class="{active : stepsKeys[activeStep] == key}">{{ steps[key] }}</li>
</ul>
回答by Arshabh Agarwal
At the moment there is no elegant way to do this. Reason being that - ngRepeat creates an associative array, which is called and not the JSON itself. Although the ECMAScript Standard mentions that:
目前还没有优雅的方法来做到这一点。原因是 - ngRepeat 创建了一个关联数组,该数组被调用而不是 JSON 本身。尽管 ECMAScript 标准提到:
The declaration order of object properties must be preserved, and iteration must happen in the same order.
必须保留对象属性的声明顺序,并且迭代必须以相同的顺序发生。
But somehow, Angular guys overlooked it. This might get rectified in the later releases.
但不知何故,Angular 的人忽略了它。这可能会在以后的版本中得到纠正。
I still think Angular's behaviour makes more sense. As objects often have more initialisation logic around them than arrays, I think it's fair to assume that the order often might not be what the user actually wants/expected, so forcing a specific sorting ensure the proper behaviour - especially when we also have to deal with older browsers.
我仍然认为 Angular 的行为更有意义。由于对象通常比数组有更多的初始化逻辑,我认为可以公平地假设顺序通常可能不是用户实际想要/期望的,因此强制特定排序确保正确的行为 - 特别是当我们还必须处理使用较旧的浏览器。