How to get total length of filtered data in angularJS when filtering is done using "ng-show"?

Question

To better the performance I have modified the code logic as below:

Before Modification

This code has very low performance on filtering for larger amount of data (approx. 2000 and more).

<tr ng-repeat="item in ctrl.filteredReport = (ctrl.updatedData | 
    filter:ctrl.filterByQuarter:strict | filter:searchText)">

After Modification

This code has increased the performance drastically.

<tr ng-repeat="item in ctrl.updatedData" 
    ng-show="([item] | filter:ctrl.filterByQuarter | filter:ctrl.searchText).length > 0">

Problem

After modification, the problem is I am not able to get the length of the filtered report which is being shown in the table.

Before modification, I was able to get the length of filtered report from ctrl.filteredReport.length.

Just for information

I have already tried the track by and the performance did not increase as it did with ng-show.

Let me know if more information is required to make the question more clear.

Hi @Bijay, I think you have to create a custom filter like mentioned here. https://stackoverflow.com/questions/34812402/get-the-length-of-list-shown-by-ng-show — Alexis, Feb 25 '19 at 07:14

score 1 · Accepted Answer · answered Feb 25 '19 at 07:42

<li ng-repeat="item in ctrl.filteredReport = (ctrl.updatedData | 
filter:ctrl.filterByQuarter:strict | filter:searchText)">

It removes / adds items from the DOM in a blink of an eye, pretty cool.

However, slow with huge data.but ng-show that hides/show elements instead of deleting them, Same result better performance

you can use track by to get index and write custom functions as told by @Alex Toby

<li ng-repeat="item in ctrl.filteredReport = (ctrl.updatedData | 
    filter:ctrl.filterByQuarter:strict | filter:searchText) track by $index">

1 Answers1