2

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

这是 HTML，但它总是显示，我希望它仅在函数为 true 时显示

<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 条件下显示成功，在 else 条件下显示div错误。div

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

4

4 回答 4

0

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

<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 

})
于 2015-07-03T19:23:25.947 回答
0

我会使用一个类似于以下的 div

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

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

于 2015-07-03T19:28:22.183 回答
0

这是我的示例：在 jsfiddle 上显示 div 的示例

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

如果您想添加淡入和淡出时间，我建议您查找角度动画。角度动画的文档和示例。

于 2015-07-03T20:08:54.520 回答
0

哇，已经有这么多答案了，而且都是正确的。大家也正确地指出，想要有一点动画，可以使用 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/

于 2015-07-03T20:49:42.513 回答