ng-repeat指令对数据进行sorting(key,value)

我有一个类似这样的代码:ng-repeat =“(key,value)in data”。 在控制器中:

$scope.Dates = {"Today":"30", "This Week":"42", "This Month": "Oct", "This Quarter" : "Bad", "This Year" : 2013 } 

和ng-repeat指令一样

 <div ng-repeat="(key,value) in Dates"> {{key}} ==> {{value}} </div> 

输出按照sorting顺序

 This Month ==> Oct This Quarter ==> Bad This Week ==> 42 This Year ==> 2013 Today ==> 30 

如何摆脱这种sorting(奇怪),因为我想在代码中使用的键..我检查谷歌组,但有一个小提琴使用两个数组,其中之一是存储的关键值。 http://jsfiddle.net/Saulzar/puhML/3/b 。 不想用这种方法。

这是JavaScript而非Angular的限制。

来自ECMAScript第三版 :

4.3.3对象是Objecttypes的成员。 它是一个无序的属性集合 ,每个属性都包含一个原始值,对象或函数。 存储在对象属性中的函数称为方法。

从ECMAScript语言规范

枚举属性的顺序没有指定

Angular 显式地对对象键进行sorting,以提供至less某种持久行为。

解决方法是遍历提取的键:

 <div ng-repeat="key in keys(Dates)"> {{key}} ==> {{Dates[key]}} </div> 
 $scope.keys = function(obj){ return obj? Object.keys(obj) : []; } $scope.Dates = { "Today":"30", "This Week":"42", "This Month": "Oct", "This Quarter" : "Bad", "This Year" : 2013 }; 

编辑: 我已经提交了一个错误 , 随时+1

ECMAScript没有指定按键应该迭代的顺序,但是所有主stream浏览器都将对象实现为链接的哈希映射(保留顺序),而且很多js库都依赖于这种行为,所以我们已经习惯了,并且很难更改。

另一方面angular度(这是完全意外的 )按字母顺序sorting。 我已经检查过自己的源代码,在那里是硬编码的,如果有一天能够解决的话,它会很好。 否则(k, v) in obj特征中的(k, v) in obj完全无用的

你真的不能做任何事情, 欺骗angular度认为你的结果是一个数组是没有用的任何东西,因为你需要数字键,然后…

如果这样可以,你可以定义getter的长度:

 Object.defineProperty(yourResultObjectOrPrototype, 'length', { get: function(){ return Object.keys(this).length; } }) 

否则, 您将需要某种filter ,它将使用for(var k in obj)迭代对象,并将结果存储在数组中。

实际上有一个答案:它被称为orderBy而不是sorting:

https://docs.angularjs.org/api/ng/filter/orderBy

{{ orderBy_expression | orderBy : expression : reverse}}

 <tr ng-repeat="friend in friends | orderBy:'-age'"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td> </tr> 

你的列表只需要一个列表,你可能需要一个索引来知道设置的顺序

 $scope.Dates = [{index:1, "Today":"30"}, {index:2,"This Week":"42"}, {index:3,"This Month": "Oct"}, {index:4,"This Quarter" : "Bad"}, {index:5,"This Year" : 2013}] 

接着

 <tr ng-repeat="(key, value) in Dates | orderBy:'index'"> <td>{{key}}</td> <td>{{value}}</td> </tr> 

这是固定的1.4 。

在这里看到细节:

以前,使用ngRepeat迭代对象属性时的项目顺序通过按键排列字母顺序来保证一致。

现在,这些项目的顺序依赖于浏览器,这是基于for key in obj语法中使用for key in obj迭代对象所返回的顺序。

看来,浏览器通常遵循按照定义的顺序提供密钥的策略。

我能够按键sortingstring的对象,像这样用ng-repeat!

在我的控制器中:

 $scope.build_config = { build_path : "/x/eng/build", arch : "x86", variant : "debug", run_method : "boot", }; $scope.get_keys = function (obj) { if (obj) return Object.keys(obj); }; 

在我的HTML中:

 <tr ng-repeat="key in get_keys(build_config) | orderBy:'toString()'"> <td> {{key}} </td> <td> {{selected.build_config[key]}} </td> </tr> 

Object.keys不保留顺序 – 仅供参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

//像随机键sorting的对象一样

 var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(an_obj)); // console: ['2', '7', '100'] 

我把它转换成一个对象数组

 $scope.Dates = [ { id: "Today", value:"30" }, { id: "This Week", value:"42" }, { id: "This Month", value: "Oct" }, { id: "This Quarter", value : "Bad" }, { id: "This Year", value : 2013 } ]; <li ng-repeat="date in Dates">{{date.id}} -> {{date.value}}</li> 

http://jsfiddle.net/2hqew68k/1/

那么,正如Angular的ngRepeat文档中所解释的那样

https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties

当使用它来遍历对象的属性时,它将不起作用

内置的filterorderBy和filter不能和对象一起工作,如果和一个对象一起使用,将会抛出一个错误。

在这种情况下,我认为最好的解决scheme是使用数组而不是对象及其属性。 因此,只要把它转换成一个数组,迭代你的对象的属性,并推送到新的数组。 毕竟,我认为这将是一个集合的自然select,而不是具有许多属性的单个对象。