Nisman Nisman - 2 months ago 26
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){
if(angular.isUndefined(fetchedValue)){
return "image";//this is the spinner
}else if(fetchedValue === null){
return "NA";
}
else{
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

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 https://docs.angularjs.org/api/ng/filter/filter 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.