angularjs ngHide delayed with ngShow

Question

Good morning, i have a field, when it is viewed it is a label, when it is modified it is an input field, i trigger this with ng-show and ng-hide and a button that enables a boolean value. When i activate the editing mode the label hides and the input field shows, it is in realtime, when i click cancel and switch the boolean, the label appears but the input field takes some time to hide, so i have a very bad visual effect. here some code

<input ng-model="name" ng-show="editing">
<label ng-hide="editing">{{name}}</label>

<button ng-click="editing=true">Edit</button>
<button ng-click="editing=false">Cancel</button>

is there a way to fix this issue?

Thank you

Answer 1

do you have ngAnimate included?

if so, this can happen. At our projects we declare and use a class on every dom element where we want to animate, and we tell angular to animate just those elements in the config callback:

$animateProvider.classNameFilter(/animate/);

Answer 2

I had the same problem all the time I had to elements with the same var to hide/show (because ng-animate) , this happens with ng-show / ng-hide / ng-if and maybe also with ng-switch but not with ng-class. So a quick fix is change your code for:

<input ng-model="name" ng-class="{'ng-hide':!editing}">
<label ng-class="{'ng-hide':editing}">{{name}}</label>

<button ng-click="editing=true">Edit</button>
<button ng-click="editing=false">Cancel</button>