ng-repeat指令在使用时对数据进行排序(键,值)

Question

我有一个像这样的代码,在数据中使用ng-repeat ="(key,value)".在控制器中:

  $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>

输出按排序顺序排列

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

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

Answer 1

这是JavaScript而非Angular的限制.

来自ECMAScript第三版:

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

来自ECMAScript语言规范

枚举属性[...]的顺序 未指定.

Angular 明确地对对象键进行排序,以便至少提供某种持久行为.

解决方法是迭代提取的键:

<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
};

Answer 2

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

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

另一方面,Angular(这是完全出乎意料的)按字母顺序排序.我自己检查了源代码,它在那里是硬编码的,如果它有一天得到解决将会很好.否则该(k, v) in obj功能完全无用.

你真的不能做任何事情,欺骗角度认为你的结果是一个数组对任何事情都没用,因为你需要数字键然后......

如果可以,您可以定义getter的长度:

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

否则你需要某种过滤器来迭代对象for(var k in obj)并将结果存储在数组中.

Answer 3

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

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>

Answer 4

这是从Angular 1.4开始修复的.

详情请见:

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

现在,项目的顺序取决于浏览器,具体取决于使用for key in obj语法迭代对象返回的顺序.

似乎浏览器通常遵循按照定义顺序提供密钥的策略...