AngularJS LimitTo在使用（键，值）时不起作用

Question

I want to make a vertical menu from array like this:

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

So I need group it by sport , next by country , then when I make a click at Soccer button, I can see all Country with this sport. But this array is so big and I need limitTo filter for max 10 country per Sport and when 'more button' is clicked I can increase the max in 10 per each click. I have an example in

jsfiddle

But the limitTo is not limiting as expected. How can I fix it?

Update the solution now is with value.slice(stard,end) I looking a method with limitTo, is because the array is unsorted, and no always have the required result.

Answer 1

The problem is that limitTo filter needs an array to work.

You could use toArray filter from this github repo .

The $filter calls in the controller could be moved back to markup that was just a test during finding the issue.

Below is the updated code with the toArray filter or in this 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>