AngularJs 在 ngRepeat 中对对象进行排序 [英] AngularJs sort object in ngRepeat

问题描述

我正在使用 AngularJs 并发现在对模板中哈希对象的属性进行排序时出现问题.
我的对象是这样的:

function TestCtrl($scope){$scope.week = {'MONDAY': ['manuel'], 'TUESDAY': [], 'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'], 'FRIDAY': []}}

现在，当我尝试在模板中打印这些值时:

<span>{{day}}</span><ul><li ng-repeat="name in names">{{name}}</li>

打印的天数顺序不同:FRIDAY MONDAY THURSDAY TUESDAY WEDNESDAY

我尝试应用过滤器 orderBy 但我认为它不适用于对象，而仅适用于数组...

我该如何订购?

解决方案

As per AngularJS 文档(1.3.20 版):

<块引用>

你需要知道 JavaScript 规范并没有定义它将以什么顺序返回对象的键.为了拥有一个保证键的确定性顺序，Angular 版本高达并包括 1.3 按字母顺序对键进行排序.

一种解决方法是使用一组键:

function TestCtrl($scope){$scope.week = {'星期一':['曼努埃尔']，'星期二':[]，'星期三':['瓦莱里奥']，'星期四':['曼努埃尔'，'瓦莱里奥']，'星期五': []}$scope.weekDays = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"];}

使用视图中的数组进行迭代:

<span>{{day}}</span><ul><li ng-repeat="name in week[day]">{{name}}</li>

<小时>

从 AngularJS 1.4.6 版更新 docs:

<块引用>

1.4 版删除了字母排序.我们现在依靠订单运行 for key in myObj 时由浏览器返回.

I'm using AngularJs and found a problem in ordering properties of a hash object in a template.
My object is like:

function TestCtrl($scope){
    $scope.week = {'MONDAY': ['manuel'], 'TUESDAY': [], 'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'], 'FRIDAY': []}
}

Now, when I try to print these values in my template:

<div ng-repeat="(day, names) in week">
    <span>{{day}}</span>
    <ul> <li ng-repeat="name in names">{{name}}</li> </ul>
</div>

The order of the days printed is different: FRIDAY MONDAY THURSDAY TUESDAY WEDNESDAY

I tried to apply the filter orderBy but I think it doesn't work with objects, but just with arrays...

How can I order it?

解决方案

As per AngularJS docs (version 1.3.20):

You need to be aware that the JavaScript specification does not define what order it will return the keys for an object. In order to have a guaranteed deterministic order for the keys, Angular versions up to and including 1.3 sort the keys alphabetically.

A workaround is to use an array of keys:

function TestCtrl($scope){
    $scope.week = {
        'MONDAY': ['manuel'], 'TUESDAY': [], 
        'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'],    
        'FRIDAY': []}

    $scope.weekDays = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"];
}

Use the array in view for iteration:

<div ng-repeat="day in weekDays">
    <span>{{day}}</span>
    <ul> <li ng-repeat="name in week[day]">{{name}}</li> </ul>
</div>

---

Update from AngularJS version 1.4.6 docs:

Version 1.4 removed the alphabetic sorting. We now rely on the order returned by the browser when running for key in myObj.

这篇关于AngularJs 在 ngRepeat 中对对象进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！