Javascript 在angularjs中显示div不工作

我只想在函数发生时显示

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条件下显示success

div

，在else条件下显示error

div

---

注意：如果可能，如果

div

以慢动作显示，这将对我非常有帮助。就像jQuery中的淡入淡出计时一样。

您应该只维护一个标志

数据。show

足以显示隐藏div

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

---

我会使用一个div，如下所示

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

{{data.message}

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

以下是我的示例：

节目组：
成功触发
触发错误

---

如果您想添加淡入淡出计时，我建议您查找angular animate

哇，已经有这么多答案了，而且都是正确的。每个人都正确地指出，要有一点动画，可以使用ngAnimate

我的小弟弟在这里，只是一个有趣的小练习

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

});

---

如果我想显示成功触发的文本，我应该这样做吗<代码>$scope.data={show:true，hide:false}？或者我可以知道在成功和失败条件下如何显示和隐藏它吗？@Preethi您应该只关心对

$scope.data={show:true}

@pankar:默认情况下，当我尝试执行

$scope.data={show:true}时，成功触发的
是可见的
消息是相同的，没有任何操作（是的，我正在尝试..实际上我在app.js的第一行
函数控制器（$scope）{$scope.data={show:true，hide:false}；}
这有什么问题吗？没有
{{
因为我使用的是laravel，这与此有冲突..为了绕过车把，可以看看ng if指令？
<div ng-controller="controller">
    <div ng-show="data.show">{{data.message}}</div>
</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>

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

});