AngularJs count filtered items in ngrepeat

Question

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?

Possible duplicate of [How to display length of filtered ng-repeat data](http://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data) — Wumms, Mar 20 '16 at 14:51

iConnor · Answer 1 · 2013-09-14T00:19:38.953

1

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;

edited Sep 14 '13 at 00:19

answered Sep 13 '13 at 23:58

iConnor

19,997
14
62
97

In the fiddle I could retrieve the total of filtered items...So I should insert in the pagination groups.length? – Tropicalista Sep 14 '13 at 00:00
the problem still persist, because directive cannot evaluate this expression: Math.ceil(groups.length/pageSize) – Tropicalista Sep 14 '13 at 00:03
Take a look at this fiddle: http://plnkr.co/edit/SjQFkNvSVPUWolQv0KZY?p=preview I'm talking about the pagination directive – Tropicalista Sep 14 '13 at 00:04
Man, Plunker is **SLOW** – iConnor Sep 14 '13 at 00:10
The problem is with Math.ceil(filtered.length/pageSize) I think angular cannot access Math functions – Tropicalista Sep 14 '13 at 00:11
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37377/discussion-between-tropicalista-and-pinocchio) – Tropicalista Sep 14 '13 at 00:17

score 1 · Answer 2 · edited May 23 '17 at 12:23

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);}
    };
});

AngularJs count filtered items in ngrepeat

2 Answers2