AngularJS limitTo 过滤对象上的 ngRepeat（像字典一样使用）答案

【问题标题】：AngularJS limitTo filter for ngRepeat on an object (used like a dictionary)AngularJS limitTo 过滤对象上的 ngRepeat（像字典一样使用）
【发布时间】：2014-11-10 04:51:24
【问题描述】：

是否可以在 ngRepeat 指令上使用 limitTo 过滤器，该指令重复对象的属性而不是数组中的项目。

我知道官方文档说limitTo 的输入需要是数组或字符串。但想知道是否有办法让它发挥作用。

这是一个示例代码：

<li ng-repeat="(key, item) in phones_dict |orderBy:'-age'| limitTo:limit_items"></li>

而$scope.phones_dict 是一个类似的对象

{ 
     item_1: {name:"John", age: 24},
     item_2: {name:"Jack", age: 23}
}

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

默认的limitTo过滤器支持1.5.7之后的类数组对象（example）

【讨论】：

【解决方案2】：

添加

 ng-if ="$index < limit"

到 ng-repeat 标记对我有用，尽管它可能不是严格意义上的“正确”方法。

【讨论】：

这很好用。 filter('myLimitTo' 也在工作，但会引发一些匿名错误。
工作就像一种魅力。 limitTo 没有用。我尝试了很多方法，但这是完成工作的方法。谢谢。

【解决方案3】：

或者你可以使用 'track by $index'... 你的 limitTo 是：

limitTo: $index == 5 (or any value)

【讨论】：

这不起作用：<li ng-repeat="(key, item) in phones_dict track by $index | limitTo: $index == 5"></li>
@YogeshMangaj - track by $index 需要在 ng-repeat 结束时进行，所以

这对我不起作用。仍然在我的 json 文件中获取每个对象，而不仅仅是 5 个。

@OamPsy ：我也在寻找类似的解决方案。请帮忙

@Ricky

【解决方案4】：

limitTo 仅适用于字符串和数组，例如对象使用自己的过滤器：

myApp.filter('myLimitTo', [function(){
    return function(obj, limit){
        var keys = Object.keys(obj);
        if(keys.length < 1){
            return [];
        }

        var ret = new Object,
        count = 0;
        angular.forEach(keys, function(key, arrayIndex){
            if(count >= limit){
                return false;
            }
            ret[key] = obj[key];
            count++;
        });
        return ret;
    };
}]);

小提琴示例：http://jsfiddle.net/wk0k34na/2/

【讨论】：

这里需要注意的是，迭代对象中的键并不能保证顺序，因此使用它可能没有意义，因为您可能每次看到不同的结果跨度>
true，orderBy 也仅适用于数组。在对象上。您还必须创建自己的对象过滤器。我在jsfiddle.net/wk0k34na/3 中扩展了我的示例，因此订单也是另一个过滤器。