ng-repeat with filtering - fire event once filtering is complete

Question

I would like to capture the event once filtering is completed on my ng-repeat list. I'm filtering through a very large dataset and would like to notify the user that filtering is still happening with a spinning icon. Once filtering is complete, I want to stop the spinning icon. However, I'm having trouble knowing when filtering is in fact complete.

I've tried using a directive on ng-repeat element however this only works on the initial call and doesn't take filtering into account.

I've also tried using $scope.$watch on the filter function, however this also doesn't seem to fire when filtering is complete.

<div>
    <input ng-show="showCustNameFilter()"
    type="text"
    ng-model="criteria.custName"
    placeholder="look up customer ...">

    <div class="col-md-3" style="margin-top:5px; float:right">
        <button type="button" class="btn btn-block btn-primary" ng-click="filter()">
            <span ng-show="filtering"><i class="glyphicon glyphicon-refresh spinning"></i></span>
            <span ng-show="!filtering"><i class="fa fa-filter"></i></span>   Filter
        </button>
    </div>
</div>

<ul>
    <li ng-repeat="i in ts.items  | filter : customerNameFilter">
          <p>{{i.site.custCode}}</p>                            
    </li>
</ul>

JavaScript

$scope.filterCustName = undefined;
$scope.filtering = false;

$scope.filter = function () {
    $scope.filtering = true;            
    if ($scope.criteria.custName !== undefined) {
        $scope.filterCustName = $scope.criteria.custName;
        $scope.filterCustCode = undefined;
    }
    $scope.filtering = false; //this has no affect...
};

$scope.customerNameFilter = function (item) {
    if ($scope.filterCustName !== undefined)
        return item !== undefined ? 
               item.site.custName.indexOf($scope.filterCustName) > -1 : true;
    else
        return true;
};

Thanks in advance!

For such an event, you can latch onto the `$last` scope variable that AngularJS will set as `true` once it reaches the last element of an `ng-repeat` (as detailed here—https://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished). However, I'd personally dedicate a function myself to do the filtering, rather than relying on the bar syntax because then you'd know when filtering is complete without having to listen to an event. — miqh, Mar 09 '18 at 01:08
Yes I tried this approach, however it only works after the first time the list is rendered. If it is filtered afterwards, the event doesn't fire because (I assume) ng-repeat has already run it's course. — roonz11, Mar 09 '18 at 02:45
I should've included an example of what I meant by doing the filtering without the bar syntax. See if this helps your cause—http://plnkr.co/edit/P1mpHM?p=preview Note the artificial `setTimeout` I've included to simulate large dataset processing. — miqh, Mar 09 '18 at 03:10
Thanks @miqid ! This is exactly what I was looking for! I have one more question... In my case, "items" is a nested list. For example I have tickets = [ items: [ {id: 1, custName: 'Joe'}, {id:2, custName : 'Bob'}]]. How can I modify the filter function to loop over all my tickets? (Let me know if this isn't clear and I can provide more code...) Thanks! — roonz11, Mar 09 '18 at 16:58
It'd be best if you forked the Plunker to illustrate exactly what structure your data is. However, I've taken a guess at what you meant and provided an updated version to filter nested lists here—http://plnkr.co/edit/L6HuxI0X0l1SUdlm2NdI?p=preview — miqh, Mar 10 '18 at 23:59

ng-repeat with filtering - fire event once filtering is complete

0 Answers0