AngularJS limitTo过滤对象上的ngRepeat(像字典一样使用)

时间:2014-09-16 12:27:14

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

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

我知道官方文档说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}
}

4 个答案:

答案 0 :(得分:14)

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/

答案 1 :(得分:9)

添加

button.performClick()

到ng-repeat标签为我做了伎俩,尽管它可能不是严格的“正确”方式。

答案 2 :(得分:1)

或者您可以使用&$ 39;跟踪$ index&#39; ...并且您的限制将是:

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

答案 3 :(得分:0)

默认limitTo过滤器在example

之后支持类似数组的对象(1.5.7