ng-show不同时更新

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

这是一个有角度的问题，有ng-show和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.

我有2个字段，我不想同时显示。一个是显示“show”是真的，另一个是什么时候它是假的。

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 ?

但事情就是这样，两个人在同一时间出现的时刻非常短暂，即使他们不应该。怎么可能，以及如何解决这个问题？

3 个解决方案

#1

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.

我弄清楚为什么它没有立即隐藏：有一个0.5秒的默认过渡动画。您需要将其覆盖到CSS中，确切地说，它在类ng-hide-add和ng-hide-remove上。

#2

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>

#3

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.

你想要做的是使用ng-hide代替ng-show。然后对两者使用$ scope.value设置为true。最初将隐藏ng-hide并显示ng-show，然后当你为$ scope.value切换为false时，它将反向翻转。基本上不要使用两个ng-shows，但你同时使用ng-hide和ng-show的组合。