如何显示ng-repeat的行数？

I have a table on my web page that is populated with data like this:

我的网页上有一个表格，其中填充了以下数据：

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

Is there a way that I can put a count of the rows displayed in the table footer. Note that I want to be able to show the rows after that have been filtered not just the row count from the grid.data array.

有没有办法可以计算表格页脚中显示的行数。请注意，我希望能够显示之后的行，而不仅仅是grid.data数组中的行计数。

3 个解决方案

#1

You could check the length of the filtered array such as:

您可以检查过滤后的数组的长度，例如：

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

#2

You can store the results of the filter and then get the length of that, 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 the performance advantage of only needing to run the filter once. It's also handy for other situations where you need both filtered and unfiltered results within your ng-repeat.

这具有仅需要运行一次过滤器的性能优势。对于在ng-repeat中需要过滤和未过滤结果的其他情况，它也很方便。

#3

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

我建议您在控制器中使用$ filter服务，如本示例中所示plunk：

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

In your case:

在你的情况下：

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

This way you do the filtering only once and avoid to introduce new scope fields in the template which makes your code hard to test and to understand.

这样，您只需进行一次过滤，并避免在模板中引入新的范围字段，这会使您的代码难以测试和理解。

You repeat over filteredRows in your template and {{ filteredRows.length }} gives you the number of visible rows.

您在模板中重复filterRows，{{filteredRows.length}}为您提供可见行数。

#1