在 angularjs 中显示 div 无效

Question

我只想在函数发生时显示一个div。

这里是HTML，但是它一直在显示，我希望它只在函数为真时显示

<div ng-controller="controller">
    <div ng-show="data.show"> Successfully triggered </div>
    <div ng-hide="!(data.hide)"> Error in triggering</div>
</div>

在我的控制器中：

if(results.data=='success') {
    $scope.data = {
        show: false,
        hide: true
    }; 
    //Here I should display the success message
} else {
    //Here I should display the error message
}

那么，如何在 if 条件下显示成功 div 而在 else 条件下显示错误 div。

注意： 如果可能的话，如果 div 以慢动作显示，那将对我很有帮助。就像 jQuery.

中的淡入淡出时间

Answer 1

您应该只维护一个足以显示隐藏 div 的标志 data.show。

<div ng-controller="controller">
    <div ng-show="data.show"> Successfully triggered </div>
    <div ng-hide="data.show"> Error in triggering</div>
</div>

控制器

app.controller('myCtrl', function(){

   ///other stuff here ..


   $scope.myFunction = function(){
       if(results.data=='success') {
          $scope.data.show = true; //success
       } else {
          $scope.data.show = false; //error
       }
    }

    //init code here
    $scope.data = { show: false }; //this should be outside your show/hide function 

})

Answer 2

我会使用一个 div 类似下面的东西

<div ng-controller="controller">
    <div ng-show="data.show">{{data.message}}</div>
</div>

摆脱你对不需要的数据的隐藏属性，并在控制器中将你的文本设置在另一个数据属性上。底线是 data.show 必须是 "truthy" 才能显示 div。老实说，如果你总是要显示 div 我会摆脱 ng-show 并在控制器中动态设置 div 内容。

Answer 3

这是我的例子：Example for show div on jsfiddle

 <div ng-app>
  <div ng-controller="showCtrl">
      <div>Show Div:
          <button ng-click="set()"></button>
        <div ng-show="showDiv"> Successfully triggered </div>
        <div ng-hide="showDiv"> Error in triggering</div>
      </div>
  </div>
</div>

如果你想添加淡入淡出的时间，建议你查阅angular animate。 Documentation and example for angular animate.

Answer 4

哇，已经有这么多答案了，而且都是对的。大家也很正确的指出，想要做一点动画，可以用ngAnimate。

我的小jsFiddle来了，只是一个有趣的小练习。

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

app.controller('testCtrl', function ($scope) {
 $scope.data = {
        show:true,
        hide: false
 }; 

$scope.go = function(checked) {
    $scope.data = {
        show:!checked,
        hide: checked
 }; 
 }

});

https://jsfiddle.net/dshun/j8wgnnm5/13/

在 angularjs 中显示 div 无效

Showing div in angularjs not working

javascript

php

jquery

angularjs

angularjs-ng-show