Question

我想从这样的数组中创建一个垂直菜单：

{"sport":"Soccer","country":"Brazil","Teams":"TeamA vs Teamb"}

所以我需要按sport对其进行分组，然后按country进行分组，然后当我点击足球按钮时，我可以看到所有国家/地区都有这项运动。但是这个阵列太大了，我需要limitTo过滤每个运动最多10个国家/地区以及更多按钮＆＃39;点击我可以每次点击增加10个最大值。

中有一个例子

jsfiddle

但limitTo并未按预期限制。我该如何解决？

更新解决方案现在是value.slice(stard,end)我在使用limitTo查找方法，因为数组未排序，并且始终没有所需的结果。

Answer 1

问题是limitTo过滤器需要一个数组才能工作。

您可以使用此github repo中的toArray过滤器。

控制器中的$filter次调用可以移回标记，这只是在发现问题时的一个测试。

以下是使用toArray过滤器或此jsfiddle。

的更新代码

var myApp = angular.module("myApp",['angular.filter', 'angular-toArrayFilter']);

myApp.controller('MyCtrl',  function MyCtrl($scope, $filter) {
    $scope.list = [{"sport":"Soccer","country":"Brazil","Teams":"TeamA vs Teamb"},
                   {"sport":"Baseball","country":"USA","Teams":"TeamA vs Teamb"},
                   {"sport":"Soccer","country":"USA","Teams":"TeamA vs Teamb"},
                   {"sport":"Baseball","country":"USA","Teams":"TeamA vs Teamb"},
                   {"sport":"Soccer","country":"Cuba","Teams":"TeamA vs Teamb"},
                   {"sport":"Baseball","country":"Brazil","Teams":"TeamA vs Teamb"},
                   {"sport":"Soccer","country":"Germany","Teams":"TeamA vs Teamb"},
                   {"sport":"Baseball","country":"Russia","Teams":"TeamA vs Teamb"},
                   {"sport":"Soccer","country":"USA","Teams":"TeamA vs Teamb"},
                   {"sport":"Soccer","country":"Spain","Teams":"TeamA vs Teamb"},
                   {"sport":"Soccer","country":"Brazil","Teams":"TeamA vs Teamb"} 
                  ];
    console.log($scope.list);
    
    $scope.sports = $filter('groupBy')($scope.list, 'sport');
    $scope.countries = $filter('groupBy')($scope.list, 'country');
    
    
});

.country{
    margin-left:50px;
}

<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="https://cdn.rawgit.com/petebacondarwin/angular-toArrayFilter/master/toArrayFilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.5/angular-filter.js"></script>

<div ng-controller="MyCtrl" ng-app="myApp">
    <div ng-repeat="(key,value) in sports">
       {{key}}
        <div ng-repeat="countryObj in countries | toArray | limitTo:3">
            <span class="country">{{countryObj[0].country}}</div>
        </div>
    </div>
</div>

Angularjs limit使用时不起作用（键，值）

1 个答案: