ng-show and ng-if lags to hide content

Question

I have the following in to show and hide the clear button based upon if the searchQuery is empty or not. When a user starts typing in the input box, the button shows instantly.

However, when the user either clicks the clear button or deletes all input, there is a noticeable lag before the clear button is removed. I have tried ng-show as well, and have received the same results. Any ideas why this lag might exist?

HTML

<button ng-if="search.cardsQuery.length" class="button-icon" ng-click="clearSearchQuery()">
    <i class="ion-android-close search-cards"></i>
</button>

CONTROLLER

$scope.clearSearchQuery = function() {
    $scope.search.cardsQuery = '';
};

Can you reproduce it here? http://plnkr.co/edit/8VvtrT7CfnZtj0iP5HmE?p=preview — Dan-Nolan, Feb 18 '15 at 18:08
Are you using ngAnimate or have any css transitions defined? — Brad Barber, Feb 18 '15 at 19:57
The answer exists at https://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class — robert, Jun 04 '15 at 04:34

score 4 · Answer 1 · answered Dec 21 '16 at 15:08

4

Check the css class on the element you're applying ng-if/ng-show to. Look for the transition effect. If the class has a transition, it may be the cause to the delay:

.button-icon {
    transition: all .5s;
}

answered Dec 21 '16 at 15:08

Arthur Yegiazaryan

520
5
14

1

transition: none !important; did the trick – webmaster Feb 11 '22 at 22:45

score 0 · Answer 2 · answered Jun 21 '18 at 21:32

0

Its a common problem seen among the developers. Even trying with ng-if causes the same issue. I can suggest a simple solution for you.

Open your css file for the particular html file and add below line.

**.ng-hide { display: none !important }**

Hope, it will help.

answered Jun 21 '18 at 21:32

3

Explain what exactly is the problem and how your solution will work. – mentallurg Jun 21 '18 at 21:35

score 0 · Answer 3 · answered Oct 13 '20 at 12:27

0

$scope.$evalAsync();

Worked for me :)

answered Oct 13 '20 at 12:27

Abdeali Chandanwala

8,449
6
31
45

ng-show and ng-if lags to hide content

3 Answers3