Question

早上好，我有一个字段，当它被查看时它是一个标签，当它被修改时它是一个输入字段，我用ng-show和ng-hide触发它，并启用一个布尔值的按钮。当我激活编辑模式，标签隐藏，输入字段显示，它是实时的，当我点击取消并切换布尔值时，标签出现但输入字段需要一些时间隐藏，所以我有一个非常糟糕的视觉效果。这里有一些代码

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

有没有办法解决这个问题？

谢谢

Answer 1

你有包含ngAnimate吗？

如果是这样，就会发生这种情况。在我们的项目中，我们在我们想要设置动画的每个dom元素上声明并使用一个类，并且我们告诉angular在config回调中为这些元素设置动画：

$animateProvider.classNameFilter(/animate/);

Answer 2

我一直有同样的问题，我有同样的var隐藏/显示的元素（因为ng-animate），这发生在ng-show / ng-hide / ng-if，也可能与ng-切换但不是ng-class。因此，快速解决方法是更改您的代码：

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

Answer 3

您的代码没有问题，正如您在我的代码段中看到的那样，它正在按预期工作。您尚未发现问题，需要向我们提供更多HTML和代码。

＆＃13;

angular.module('myApp', []).controller('myController', function($scope) {
  $scope.editing = true;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <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>
</div>

＆＃13;

angularjs ngHide以ngShow延迟

3 个答案: