AngularJS - Delaying filter until after loading AJAX calls

Question

I want to know how I can delay the filter functionality until after loading all the data through AJAX calls.

I'm trying to filter through data, but I can't filter some of them since they're not loaded until the AJAX calls. Is there a way to either delay the filter functionality or disable and enable it after all data is loaded?

Update

The way that the data structure is set up is that I make an AJAX call and load a list of

posts

made by different users. Afterwards, I call two other AJAX calls to load information about the

user

and the

account

for each post.

When I set up filters for

posts + user info + account info

, I can only filter through

posts

. However, I want to filter through

user

and

account

information as well.

I think I can fix the problem if I disable filters until all data is loaded.

Answer 1

Use ng-model plus the : syntax to bind the filter to the response data to do this. For example:

<select ng-model="$root.listData" ng-include="'my_list' | filterTopTen:$root.listData" required></select>

Many stateful filters can be converted into stateless filters just by exposing the hidden state as a model and turning it into an argument for the filter.

Unit Tests reveal that filters are executed in the following cases:

should not invoke filters unless the input/arguments change
should reevaluate filters with non-primitive input that does support valueOf() when valueOf() value changes
should always reevaluate filters with non-primitive input that doesn't support valueOf()
should not reevaluate filters with non-primitive input that does support valueOf()
should always reevaluate filters with non-primitive input created with null prototype

Since filters run before controllers, make sure the controller which updates the model is separate from the controller which is bound to the view to avoid a race condition.

References

AngularJS - Delaying filter until after loading AJAX calls

Sign up