angularjs - counting in reverse in ng-repeat with filtering

Question

I have an array of 115 books stored in details below in ng-repeat. When using {{$index +1}} a count of 1 to 115 appears. If I filter the books by last name and show 12, {{$index + 1}} will show a count of 1 to 12. Is it possible to instead show a reverse count using $index so that the count starts with the highest number and goes to lowest? Without filtering, this will work using {{details.length - $index}} but when filtering the results in 12 items show 115 through 104 instead of 12 through 1.

I have an ng-repeat like this:

<tr ng-repeat="det in details | orderBy:['-YEAR_READ','-UniqueCounter'] | filter:searchingFor>
    <td>{{$index + 1}}</td>
    <td>{{details.length - $index}}</td>
    <td>

Pankaj Parkar · Accepted Answer · 2016-12-26 21:21:54Z

2

Currently while showing the index you are referring the unfiltered collection, therefore you can't see the filtered result count using details.length variable. Use alias filter object using as would do the trick like ng-repeat="item in item | filter: { prop: 'search' }| customFilter as filteredResult"

<tr 
  ng-repeat="det in details | orderBy:['-YEAR_READ','-UniqueCounter'] | filter:searchingFor as filtered">
    <td>{{$index + 1}}</td>
    <td>{{filtered.length - $index}}</td>
    <td>
</tr>

edited Dec 26, 2016 at 21:21

answered Dec 26, 2016 at 20:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Yoan · Accepted Answer · 2016-12-26 20:48:27Z

0

You can apply to the collection a new filter to get the reverse behavior, like:

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

and use it like:

<tr ng-repeat="det in details |reverse | orderBy:['-YEAR_READ','-UniqueCounter'] | filter:searchingFor >
    <td>{{$index + 1}}</td>
    <td>{{details.length - $index}}</td>
    <td>
</tr>

answered Dec 26, 2016 at 20:48

Yoan

2,2171 gold badge14 silver badges21 bronze badges

1 Comment

charlietfl Over a year ago

will display length of unfiltered array

Collectives™ on Stack Overflow

angularjs - counting in reverse in ng-repeat with filtering

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related