Nisman Nisman - 1 year ago 96
AngularJS Question

how to show a spinner using a filter in angularjs?

I am using a filter to show some values in a table. Values fetching by ajax calls and I want to show a spinner while the values are fetching. So I wrote:

app.filter("fetchedValue", function(){
return function(fetchedValue){
return "image";//this is the spinner
}else if(fetchedValue === null){
return "NA";
return fetchedValue;

It is not working. I am not sure how to get the spinner when the value is undefined. Does anybody know how to do it?

Answer Source

I think you misunderstand what a filter is for. The function should return true or false depending if you want the value given to the function to be filtered or not.

See and AngularJS custom filter function

To answer your question though, forget about the filter, and just use an ng-if or an ng-show or an ng-hide on an <img> when the value is undefined.

<img ng-hide="fetchedValue" src="spinner.gif" />

This assumes that your fetched value is always truthy. A more robust solution would be to set a flag in a finally block of the request promise, and then ng-hide based on that flag.