AngularJS中如何去掉 ng-repeat的自动排序
2016-03-29
展开全部
JavaScript Object本身就不会保证key之间的排序 (EcmaScript 3 An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function)
但在目前的modern browsers,现实是这样的:
……
嗯,先卖个关子,我们拿你的例子,来试一段代码:
var alphaPrefixedRecords = {
"y2013": 'whatever',
"y2016": 'whatever',
"y2012": 'whatever'
};
var numAlphaRecords = {
"2013y": 'whatever',
"2016y": 'whatever',
"2012y": 'whatever'
};
var pureNumRecords = {
2013: 'whatever',
2016: 'whatever',
2012: 'whatever'
};
var numStringRecords = {
"2013": 'whatever',
"2016": 'whatever',
"2012": 'whatever'
};
var floatNumRecords = {
20.13: 'whatever',
20.16: 'whatever',
20.12: 'whatever'
};
var floatStringRecords = {
"20.13": 'whatever',
"20.16": 'whatever',
"20.12": 'whatever'
};
// insert all keys into an array based
// on the order of their definition
function iterateKey(obj) {
var key, i = 0;
var arr = [];
for (key in obj) {
if (obj.hasOwnProperty(key)) {
arr.push(key);
i = i + 1;
}
}
return arr;
}
console.log('fucked up by JS: ')
console.log('pure num keys: ', iterateKey(pureNumRecords));
console.log('num string keys: ', iterateKey(numStringRecords));
console.log('based on order of definition: ')
console.log('alpha prefixed keys: ', iterateKey(alphaPrefixedRecords));
console.log('num alpha keys: ', iterateKey(numAlphaRecords));
console.log('float num keys: ', iterateKey(floatNumRecords));
console.log('float string keys: ', iterateKey(floatStringRecords));
输出:
fucked up by JS:
pure num keys: ["2012", "2013", "2016"]
num string keys: ["2012", "2013", "2016"]
based on order of definition:
alpha prefixed keys: ["y2013", "y2016", "y2012"]
num alpha keys: ["2013y", "2016y", "2012y"]
float num keys: ["20.13", "20.16", "20.12"]
float string keys: ["20.13", "20.16", "20.12"]
结论是什么呢?
1. 对于类型是number或可转换为整数number的string类型的key,for...in无论如何都会按照number的大小排序,这类似于数组的行为。
2. 对于alphanumerical string类型的key,for...in会按照定义object时的key顺序排列。
Angular可能会做一些内部排序,但是你也看出来了,依靠object key实现排序的做法是不可靠的。即使你是JS ninja,写出一段高深莫测的代码,你以后自己看到了都会想我艹这什么鬼。所以少年,对于你这种年份的use case,还是乖乖地改成数组,然后手动order吧。
但在目前的modern browsers,现实是这样的:
……
嗯,先卖个关子,我们拿你的例子,来试一段代码:
var alphaPrefixedRecords = {
"y2013": 'whatever',
"y2016": 'whatever',
"y2012": 'whatever'
};
var numAlphaRecords = {
"2013y": 'whatever',
"2016y": 'whatever',
"2012y": 'whatever'
};
var pureNumRecords = {
2013: 'whatever',
2016: 'whatever',
2012: 'whatever'
};
var numStringRecords = {
"2013": 'whatever',
"2016": 'whatever',
"2012": 'whatever'
};
var floatNumRecords = {
20.13: 'whatever',
20.16: 'whatever',
20.12: 'whatever'
};
var floatStringRecords = {
"20.13": 'whatever',
"20.16": 'whatever',
"20.12": 'whatever'
};
// insert all keys into an array based
// on the order of their definition
function iterateKey(obj) {
var key, i = 0;
var arr = [];
for (key in obj) {
if (obj.hasOwnProperty(key)) {
arr.push(key);
i = i + 1;
}
}
return arr;
}
console.log('fucked up by JS: ')
console.log('pure num keys: ', iterateKey(pureNumRecords));
console.log('num string keys: ', iterateKey(numStringRecords));
console.log('based on order of definition: ')
console.log('alpha prefixed keys: ', iterateKey(alphaPrefixedRecords));
console.log('num alpha keys: ', iterateKey(numAlphaRecords));
console.log('float num keys: ', iterateKey(floatNumRecords));
console.log('float string keys: ', iterateKey(floatStringRecords));
输出:
fucked up by JS:
pure num keys: ["2012", "2013", "2016"]
num string keys: ["2012", "2013", "2016"]
based on order of definition:
alpha prefixed keys: ["y2013", "y2016", "y2012"]
num alpha keys: ["2013y", "2016y", "2012y"]
float num keys: ["20.13", "20.16", "20.12"]
float string keys: ["20.13", "20.16", "20.12"]
结论是什么呢?
1. 对于类型是number或可转换为整数number的string类型的key,for...in无论如何都会按照number的大小排序,这类似于数组的行为。
2. 对于alphanumerical string类型的key,for...in会按照定义object时的key顺序排列。
Angular可能会做一些内部排序,但是你也看出来了,依靠object key实现排序的做法是不可靠的。即使你是JS ninja,写出一段高深莫测的代码,你以后自己看到了都会想我艹这什么鬼。所以少年,对于你这种年份的use case,还是乖乖地改成数组,然后手动order吧。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询