当前位置: 首页 > 面试题库 >

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

郑宏朗
2023-03-14
问题内容

我有一个类似ng-repeat =“(数据中的(键,值))的代码。在控制器中:

  $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

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


问题答案:

这是JavaScript而不是Angular的限制。

从ECMAScript第三版:

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

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


 类似资料:
  • Angularjs ng用div标记重复。。我有一个带有div标记的代码,如图所示。。我想重复整个div,在第二个循环中img src是不同的。。如何使用angularjs中的ng repeat指令执行此操作?

  • 问题内容: 我正在尝试将模型中的数据插入模板,但是我想每7次重复添加一个新的表行。使用基于strign的模板,我可以使用迭代索引和模来相当容易地做到这一点,但是我无法弄清楚如何使用angular的DOM模板来做到这一点。 这是HTML: 而javascript类似于: 您可以在JSFiddle中查看以下代码:http : //jsfiddle.net/3zhbB/2/ 问题答案: 请与天数组的数组

  • 问题内容: 我花了一段时间试图找到一个优雅的解决方案,而我却找到了一个“可行”的解决方案,它感觉不是最简单或正确的做事方式。 所以,我的问题是…如何动态加载指令!在某些情况下,以下是我希望我能摆脱它的方式!除了模板加载之外,我没有包含路由或其他任何内容,而是为下面的控制器分配了ng- controller。 app.js template.html 任何人都可以提供的建议将不胜感激,如果我做任何明

  • 问题内容: 我想在内容更改时创建具有自定义行为的列表。我尝试为此创建一个指令,但是我对如何将ng-transclude与ng- repeat指令结合起来感到迷茫。有人可以让我走上正轨吗? HTML: Javascript: 我已经在这里工作了一部分 编辑: 条件: 该项目的模板必须在视图中定义,而不是在指令中定义,并且必须有权访问子作用域中的项目属性。理想情况下,我想像在ng-repeat指令中那

  • 问题内容: 我正在尝试在ng-repeat中动态添加不同的指令,但是输出没有被解释为指令。 我在这里添加了一个简单的示例:http : //plnkr.co/edit/6pREpoqvmcnJJWzhZZKq 控制器: 指示: HTML: 如何通过ng-repeat 使角度拾取在中指定的指令? 问题答案: 我知道这是一个老问题,但是google将我带到了这里,但我不喜欢这里的答案。所以我创建了这个

  • 问题内容: 我有一张桌子,其中的行通过重复。我正在尝试创建一个模板,为每一行生成列 问题是我的自定义td模板根本没有呈现。在这里,我打算用n个s 代替- 这将根据我的数据对象上的属性数量来确定,但是目前,我只是试图获得一个简单的指令,该指令将输出两列。 MYPLUNKER:显示此问题的一个实例和指令代码。 问题答案: 如注释中所指出,指令模板应具有单个根元素。因此,我建议您将元素移动到指令的模板,