Angularjs limitTo not working when use (key,value)

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.

AWolf · Accepted Answer · 2015-09-02 21:25:35Z

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>

Collectives™ on Stack Overflow

Angularjs limitTo not working when use (key,value)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related