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>
那么,正如Angular的ngRepeat文档中所解释的那样
https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties
当使用它来遍历对象的属性时,它将不起作用
内置的filterorderBy和filter不能和对象一起工作,如果和一个对象一起使用,将会抛出一个错误。
在这种情况下,我认为最好的解决scheme是使用数组而不是对象及其属性。 因此,只要把它转换成一个数组,迭代你的对象的属性,并推送到新的数组。 毕竟,我认为这将是一个集合的自然select,而不是具有许多属性的单个对象。