Angularjs切换div可见性 [英] Angularjs toggle div visibility

问题描述

我试图在点击按钮时切换div文本。我尝试根据变量获取范围变量和toggeling classname。我在哪里犯了错误这里

I am trying to toggle a div text on click of a button. I tried taking a scope variable and toggeling classname based on the variable. Where am I making the mistake here

<button ng-click="toggle()">test </button>
    <div ng-class="{{state}}" >
        hello test
    </div>


function ctrl($scope) {    
    $scope.state = vis;
    $scope.toggle = function () {
      state = !state;
    };
}

 .vis{
      display:none;
}

推荐答案

你可以简化这个喜欢这样

You can simplify this a lot like so

<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
    hello test
</div>

小提琴示例

除非您需要特定的ng-class进行切换，否则您可以执行类似

Unless you need the specific ng-class to toggle in which case you can do something like

<button ng-click="showDiv = !showDiv">test </button>
<div ng-class="{'vis' : showDiv }" >
    hello test
</div>

小提琴示例

（只是确保你为此使用更新版本的角度）

(just make sure you're using a newer version of angular for this)

这篇关于Angularjs切换div可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！