angularJs filter in ng-repeat

Question

I am trying to provide a pagination to a table:
Let's say there are 100 records and records per page is 10. If I am in 3rd page, records from 21 to 30 should be prepared in the table.

So I am trying to filter those records using angular filter but couldn't succeed. I tried multiple ways:

<tr on-last-repeat ng-repeat="record in data | filter:( $index>= fromRow && $index <= toRow)" role="row">
Created a custom filter but unable to pass either $index or record to the filter. If record could be passed to the filter, so that I can get the index by records.indexOf(record).

Trying to pass $index:

<tr on-last-repeat ng-repeat="record in data | paging:$index:fromRow:toRow track by $index" role="row">

I found a solution in StackOverflow which is named as native filter:

<tr on-last-repeat ng-repeat="record in data | filter:filterPaging()" role="row">

$scope.filterPaging = function(){
    return function(record){
        var idx = $scope.data.indexOf(record)+1;
        if(idx >= $scope.fromRow && idx <= $scope.toRow) return true;
        return false;
    }
};

But this function is getting called so many times. My table has 4 columns and 10 records and the function is being called for 40 times. I am concerning about performance if there are thousands of records.

Can somebody please take few minutes to have a look on this.

It may help you but not much sure stackoverflow.com/questions/30750068/… — Vineet
– Vineet, Commented Jun 12, 2015 at 7:15
Do you know there is built-in limitTo filter? Btw. on our projects we always ended up filtering arrays on-demand in the controller so that the ngRepeat does not use any filters. — Pavel Horal
– Pavel Horal, Commented Jun 12, 2015 at 7:26
@PavelHoral Well no, I have never heard. Thanks, it worked well. BTW, still I am curious to know if there is any way to pass either $index or looped item to filter. Can you keep the comment as answer so that I can mark it as 'Accepted'. — Rama Rao M
– Rama Rao M, Commented Jun 12, 2015 at 8:49
Unfortunately the filter works before any child scope (hence $index or item) is created. So no, you can not use those in the ngRepeat expression. — Pavel Horal
– Pavel Horal, Commented Jun 12, 2015 at 8:54
it is happening because your filter method is getting call on each digest call.. — Pankaj Parkar
– Pankaj Parkar, Commented Jun 12, 2015 at 9:50

Pavel Horal · Accepted Answer · 2015-06-12 08:53:34Z

1

There is built-in limitTo filter doing exactly what you are trying to achieve.

By the way on our projects we always ended up filtering arrays on-demand in the controller (or custom directive) so that the ngRepeat doesn't have to use any filters.

answered Jun 12, 2015 at 8:53

Pavel Horal

18.3k3 gold badges70 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Huy Hoang Pham · Accepted Answer · 2015-06-12 07:30:47Z

0

Why don't you store all the data in an array, then filter it only when fromRow or toRow change?

var fullData = $scope.data;
$scope.$watch('fromRow', function(){
        // frowRow minus 1 to get the index
        $scope.data = fullData.splice(fromRow - 1, toRow);
});

answered Jun 12, 2015 at 7:30

Huy Hoang Pham

4,1471 gold badge19 silver badges28 bronze badges

1 Comment

Rama Rao M Over a year ago

since it is bindable data and user is allowed to change data, so it is difficult to syncronize data b/w data and fullData. It gives more pain than filter.

Collectives™ on Stack Overflow

angularJs filter in ng-repeat

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related