AngularJS: trigger event after nested ng-repeat with filter is complete

Question

I have a very big JSON in my controller fetched from a MongoDB database. Here's its structure (haven't added irrelevant keys):

$scope.keyword; //ignore for now explained below
$scope.data = [
    {"key" : [
                 {"nested_key": //some value},
                 {"nested_key": //some value} //so on
             ]
    },
    {"key" : [
                 {"nested_key": //some value},
                 {"nested_key": //some value}
             ]
    },
    {"key" : [
                 {"nested_key": //some value},
                 {"nested_key": //some value}
             ]
    }
]

Here's my HTML template displaying the JSON:

<div ng-repeat="outer in data">
    <div ng-repeat="inner in outer.key | keywordFilter: keyword">
        //print inner values
    </div>
</div>

Here, 'keyword' holds values which will be used to filter the inner ng-repeat loop. Here's my filter:

app.filter('keywordFilter', function() {
    return function(collection, keyword) {
        //Iteration over the entire collection. If keyword exists add the item to output
        return output;
    }
})

Now, as expected, the filter runs whenever I modify '$scope.keyword'. It is updated when I click on a button as follows:

HTML:

<input type="text" ng-model="temp" />
<button ng-click="updateKeyword()">

Controller:

$scope.updateKeyword = function() {
    $scope.keyword = $scope.temp;
}

The Problem:

Due to the sheer size of data, the filtering process is taking around 10-15 seconds (sometimes the browser hangs!) and THEN the new filtered data returned from the filter is displayed on the screen.

The Requirement:

What I want to do is that during these 10-15 seconds I want to show a loader and after the calculations are done, the news is displayed. How do I achieve this?

What I tried: I figured that once I click on the filter button, I would need to wait for the ng-repeat loop to finish and thus I tried triggering an event on the finish of ng-repeat by referring this thread.

But what I found out is that the event is triggered ONLY when the data is displayed for the first time and not when the filter button is clicked and the data is filtered by the keyword filter.

Nested ng-repeat is a waste of resources. The fix is to traverse `data` with JS function and use custom directive instead of 'html programming'. — Estus Flask, Jul 14 '15 at 10:16

score 0 · Answer 1 · answered Jul 14 '15 at 11:18

You could maybe simply invalidate you action when angular is in digest:

in your controller:

function isInDigest(){
 $scope.$$phase ? true : false;
}


$scope.updateKeyword = function() {
 if(isInDigest()){ return; }
 $scope.keyword = $scope.temp;
}

and in your template

<button ng-class="{'inactive':  isInDigest()}"  ng-click="updateKeyword()">

score 0 · Answer 2 · edited May 23 '17 at 10:32

Just use angular's $timeout, which runs the function it receives as parameter after angular has manipulated and the browser has rendered the DOM.

For more info, I recommend this and this stackoverflow answer discussing some timings in connection with $timeout and $evalAsync, with some very authoritative references.

But I concur with estus' comment: this might not be the architecture you're looking for, use javascript in the controller or a directive to leave less work for ng-repeat, or use lazy loading mechanisms if your data is so large.

AngularJS: trigger event after nested ng-repeat with filter is complete

2 Answers2