carndacier carndacier - 2 years ago 119
HTML Question

condition met ngShow AND ngHide

I'm trying to display a loading icon while data is loading, and then the data when it's ready.
The problem is I for a few seconds, I can see loading icon AND the data...

enter image description here

Here is my code

$scope.items[y].content.push({ text: '', loading: true });

API.getContent(id, x, y, function (response, x, y) {

$scope.items[y].content[x].loading = false;
$scope.items[y].content[x].text =;

My view :

<i ng-show="item.loading" class="fa fa-spinner fa-pulse fa-2x"></i>
<p ng-hide="item.loading" class="portal-subtitle" ng-bind-html="item.text"></p>

My content is loaded asynchronously. The loading value is set to false at soon as I get the result, so the icon should be invisible at this moment... but it's not ! (as you can see on the picture).

Any idea how to solve this ?


I displayed the value of my "item.loading". It appears that when the value goes from true to false, the text is displayed, but the icon is still here for a few seconds... does that help ?

Thanks for your help

Answer Source

If you are using ng-animate, add this to your css:{display: none !important; }

The animation is waiting to complete before the ng-hide kicks in.

The above css will hide the element immediately after ng-hide and ng-hide-animate coincide.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download