CODEWITHSUNDEEP
angularjs
Tropicalista
Tropicalista

Reputation: 3137

AngularJs count filtered items in ngrepeat

I have a nested filtered list that I want paginate. Because total number of item are filtered I'm trying to set the total number of the pages on the html like so:

<div ng-repeat="group in filtered = (groups)|startFrom:(currentPage-1)*pageSize|limitTo:pageSize">

    <h2>
        {{ group.label }}
    </h2>

    <ul>
        <!-- BEGIN: Inner ngRepeat. -->
        <li ng-repeat="friend in group.friends">

            {{ friend.name }}
             <button class="btn btn-small" type="button" ng-click="deleteItem(friend)">Delete</button>
        </li>
        <!-- END: Inner ngRepeat. -->
    </ul>

</div>
<!-- END: Outer ngRepeat. -->

<pagination rotate="true" num-pages="Math.ceil(filtered.length/pageSize)" current-page="currentPage" max-size="maxSize" boundary-links="true">

</pagination>

FIDDLE: http://plnkr.co/edit/SjQFkNvSVPUWolQv0KZY?p=preview

On the directive attribute I try to set the total number of pages with an expression, but I get an error of non assignable model expression...

[EDIT]

Just to be a more clear, the problem is on this line: 

<pagination rotate="true" num-pages="Math.ceil(filtered.length/pageSize)" current-page="currentPage" max-size="maxSize" boundary-links="true">

</pagination>

when trying to evaluate the expression: Math.ceil(filtered.length/pageSize)

[EDIT]

As Pinocchio suggested I create a $scope.Math and then the Math function is accessible from angular, but in plunkr i got this error: Non-assignable model expression: Math.ceil(groups.length/pageSize) (directive: pagination) but on my local machine I don't have this error displayed in the console.

Should I avoid this approach?

Upvotes: 1

Views: 2456

Answers (2)

joel.software
joel.software

Reputation: 1515

If you stumbled upon this answer like I did, looking for the solution to the title of this question, I found it here: How to display length of filtered ng-repeat data

The issue with this example for me was in theory OP could just use groups.length in his pagination, for my use-case I'm doing something like this: 

ng-repeat="student in filtered = (activeStudents | filter:groupFilter | filter:query) | startFrom: (currentPage - 1) * itemsPerPage | limitTo:itemsPerPage"

<pagination direction-links="false" boundary-links="true" total-items="filtered.length" items-per-page="itemsPerPage" ng-model="currentPage">

And the startFrom filter i'm using is:

angular.module('app')
  .filter('startFrom', function() {
    return function(input, start) {
        if(input) {return input.slice(start);}
    };
});

Upvotes: 1

iConnor
iConnor

Reputation: 20209

Your problem is in the expression

<div ng-repeat="group in filtered = (groups)|startFrom:(currentPage-1)*pageSize|limitTo:pageSize">

You should take the filtered = out like this 

<div ng-repeat="group in (groups)|startFrom:(currentPage-1)*pageSize|limitTo:pageSize">

Also because angular doesn't have access to Math you should apply it to your scope like so.

 $scope.Math = window.Math;

Upvotes: 1

Related Questions