How to show the number of lines from ng-repeat?

Question

I have a table on my web page filled with such data:

<tr data-ng-repeat="row in grid.data | filter:isQuestionInRange"> <td>{{ row.problemId }}</td> </tr> 

Is there a way that I can put the number of rows displayed in the footer of the table. Please note: I want to show the rows after filtering, and not just the number of rows from the grid.data array.

Answer 1

You can check the length of the filtered array, for example:

 {{ (grid.data | filter:isQuestionInRange).length }} 

Answer 2

You can save the filter results and then get its length, for example, using results here:

 <tr data-ng-repeat="row in results = (grid.data | filter:isQuestionInRange)"> <td>{{ row.problemID }}</td> </tr> {{results.length}} 

This has a performance advantage only when you need to run the filter once. It is also convenient for other situations when you need both filtered and unfiltered results in your ng-repeat .

Answer 3

I suggest you use the $ filter service in your controller, as shown in this plunk example :

 $scope.evenNumbers = $filter('filter')($scope.numbers, $scope.isEven); 

In your case:

 var $scope.filteredRows = $filter('filter')($scope.gridData, $scope.isQuestionInRange); 

This way you filter only once and avoid entering new scope fields into the template, which makes your code difficult to test and understand.

You repeat over filteredRows in your template, and {{ filteredRows.length }} shows the number of visible lines.