CODEWITHSUNDEEP
angularjsbindingng-show
YohjiNakamoto
YohjiNakamoto

Reputation: 393

ng-show not updating at the same time

this is an angular question, with ng-show and bindings.

I have 2 fields that I don't want to show at the same time. One is show when the "show" is true, and the other on when it's false.

I have a dropdown that changes this "show" value when certain option is selected.

But here's the thing, there is a very short moment when the two are showing at the same time, even though they shouldn't. How is it possible, and how to fix that ?

Upvotes: 0

Views: 1021

Answers (3)

YohjiNakamoto
YohjiNakamoto

Reputation: 393

I figured out why it wasn't instantly hiding : there is a default transition animation of 0.5s. You need to override that into the CSS, precisely, it's on the classes ng-hide-add and ng-hide-remove.

Upvotes: 5

Jeremy Elbourn
Jeremy Elbourn

Reputation: 2690

Here is the simplest working example of what you're asking. It changes instantly. It's hard to say what would be causing a lag without more insight into your particular situation.

var module = angular.module('test', []);

function PageCtrl($scope) {
  $scope.msg = 'Select hide/show example';
  $scope.showFirst = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test" ng-controller="PageCtrl">
  <p>{{msg}}</p>
  
  <select ng-model="showFirst">
    <option ng-value="true">First</option>
    <option ng-value="false">Second</option>
  </select>
  
  <p ng-show="showFirst">This is paragraph one</p>
  
  <p ng-hide="showFirst">This is paragraph two</p>
</div>

Upvotes: 1

Claude
Claude

Reputation: 417

What you want to do is use ng-hide with ng-show instead. Then use $scope.value set to true for both. Initially ng-hide will be hidden and ng-show will be shown then when you toggle to false for $scope.value it will flip in reverse. Basically don't use two ng-shows but you use a combination of both ng-hide and ng-show.

Upvotes: 0

Related Questions