condition met ngShow AND ngHide

Question

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...

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 = response.data.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 ?

EDIT:

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

try writing ng-hide first then ng-show. This way the DOM knows to hide the data. Eg. `
` — mattyman, May 16 '16 at 12:47
I tried.. but got same issue. The icon is just now after the text. but still both displayed :/ — carndacier, May 16 '16 at 13:32
is your item.loading working properly? did u try `item.loading == true` — mattyman, May 16 '16 at 13:47
What do you mean by "working properly" ? I'm just setting it to true or false :/ and I tried "== true", same result. I'll update my question for a new information — carndacier, May 16 '16 at 14:10
This might be dodging the problem at hand but have you tried using ng-if instead of ng-show? — Eric N, May 16 '16 at 14:37
I did... same issue... I tried "ng-if="item.loading"" and "ng-if="item.loading == true"" — carndacier, May 16 '16 at 14:45
I've just tried to put the condition in a function... still the same ! it's driving me crazy... — carndacier, May 16 '16 at 14:48

Daniel Patrick · Accepted Answer · 2016-05-16T17:41:40.170

1

If you are using ng-animate, add this to your css:

.ng-hide.ng-hide-animate{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.

edited May 16 '16 at 17:41

answered May 16 '16 at 14:46

Daniel Patrick

3,980
6
29
49

Nop, still the same... actually, I was doing that, and I created this loading value to try fix it... :/ – carndacier May 16 '16 at 15:36
hmmm... okay, let's try to trace this back then. The issue here is not with the values being changed but the actual rendering of the animation/text. Are you using ng-animate in your code by any chance? Seems that some people have issues with that: http://stackoverflow.com/questions/26938021/angular-ng-if-or-ng-show-responds-slow-2second-delay – Daniel Patrick May 16 '16 at 15:46
1

Man... that did the trick... incredible ! thanks a lot, couldn't figure this out... Update your answer, was using ngAnimate, and adding ".ng-hide.ng-hide-animate{display: none !important; }" fixed it ! – carndacier May 16 '16 at 15:53

condition met ngShow AND ngHide

1 Answers1