Question

我正在尝试将ng-repeat与字典样式语法一起使用，并对键值应用顺序。

(key, value) in something | orderBy:'key'

似乎OrderBy没有按预期工作

Answer 1

orderBy的参数必须与对象数组中的属性名匹配。

您的数据需要看起来像这样：

$scope.list2 = [ { id:"2013-01-08T00:00:00", name:'Joe'},
                 { id:"2013-01-09T00:00:00", name:'Sue'}];

然后像这样的过滤器将起作用：

<div ng-repeat="item in list2 | orderBy:'id':true">

Fiddle

请注意，orderBy适用于整个数组（上面的示例代码中的something），它返回一个已排序的数组。 orderBy对key和value一无所知。

Answer 2

这没有实现。请看这里：

https://github.com/angular/angular.js/issues/1286

EDIT（2013年8月27日）：这个问题现在似乎已经解决了。

Answer 3

我创建了一个自定义过滤器，使其可以用于选择列表：

.filter('toDictionaryArray', function () {
    return function (obj) {
        if (!(obj instanceof Object)) return obj;

        var arr = [];
        for (var key in obj) {
            arr.push({ key: key, value: obj[key] });
        }
        return arr;
    }
})

选择列表ng-options然后如下所示：

<select ng-options="kv.key as kv.value for kv in p.options | toDictionaryArray | orderBy:'value'"></select>

Answer 4

正如akonsu所说，该功能已被要求here。但是，我仍然无法使用最新的（1.3.0）测试版。

在评论中隐藏了nice workaround（请注意这需要underscore，并且您必须使用＆＃39替换对＆＃39; key＆＃39;的引用;值。$ key＆＃39;在上例中）：

[添加过滤器]：
app.filter('toArray', function() { return function(obj) {
    if (!(obj instanceof Object)) return obj;
    return _.map(obj, function(val, key) {
        return Object.defineProperty(val, '$key', {__proto__: null, value: key});
    });
}});
示例标记：
<div ng-repeat="val in object | toArray | orderBy:'priority' | filter:fieldSearch">
  {{val.$key}} : {{val}} 
</div>
潜在的缺点：


在IE8中，Object.defineProperty不会像这样工作（如果你不这样做   介意$ key可枚举然后这是一个简单的改变）。

如果您的属性值不是对象，则无法设置$ key属性   这失败了。

它没有直接集成到orderBy或ngRepeat中   所以语法不同。

Answer 5

这是一个很好的解决方法（angular-toArrayFilter）：

.filter('toArray', function () {
  return function (obj, addKey) {
    if ( addKey === false ) {
      return Object.keys(obj).map(function(key) {
        return obj[key];
      });
    } else {
      return Object.keys(obj).map(function (key) {
        if(typeof obj[key] == 'object') return Object.defineProperty(obj[key], '$key', {     enumerable: false, value: key});
      });
    }
  };
});

Answer 6

而不是使用仅支持数组而不支持对象的orderby过滤器。您可以编写自己的过滤器，我从Justin Klemm http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/获取代码，并添加了对指定多个排序字段的支持。下面的过滤器示例是根据值中的属性进行过滤，但您也可以根据键轻松地将其更改为过滤器。

app.filter('orderObjectBy', function()
{
    return function(items, fields, reverse)
    {
        var filtered = [];
        angular.forEach(items, function(item)
        {
            filtered.push(item);
        });

        filtered.sort(function (a, b)
        {
            var result = 0;

            for (var i = 0; i < fields.length; ++i)
            {
                if (a[fields[i]] > b[fields[i]])
                {
                    result = 1;
                    break;
                }
                else if (a[fields[i]] < b[fields[i]])
                {
                    result = -1;
                    break;
                }
            }

            return result;
        });

        if (reverse)
        {
            filtered.reverse();
        }

        return filtered;
    };
});

然后在html5网页中使用它，就像统计数据是具有键值对的地图/字典一样。

<div class="row" ng-repeat="stat in statistics | orderObjectBy: 'NumTimesPartnered', 'NumTimesOpponent']:true">
    <div class="col col-33">{{stat.Name}}</div>
    <div class="col"><center>{{stat.NumTimesPartnered}}</center></div>
    <div class="col"><center>{{stat.NumTimesOpponent}}</center></div>
</div>

命令不使用ng-repeat上的dict语法

6 个答案: