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
}

那么，如何在条件和错误div中显示其他条件中的成功div。

注意：如果div以慢动作显示，如果可能的话，对我来说非常有帮助。就像jQuery中的淡出时间一样。

Answer 1

你应该只保留一个足以显示hide 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>

删除不需要的数据的hide属性，并在控制器中将文本设置为另一个数据属性。底线是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>

如果你想添加淡入和淡出时间，我建议你查看角度动画。 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不起作用

4 个答案: