Angularjs切換div的可見性

我想切換單擊按鈕上的div文本。我嘗試使用一個範圍變量並根據變量創建類名。我在哪裏做的錯誤here Angularjs切換div的可見性

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

來源

2015-09-28 Kurkula

您可以除非你需要特定的納克級的切換在這種情況下，你可以做簡化這個有很多像這樣

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

Fiddle example

像

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

Fiddle example

（只需確保你使用的角度對這個更新的版本）

來源

2015-09-28 19:17:55 ajmajmajma

在jsfiddle嘗試..這沒有爲我工作。 – Kurkula

@Chandana你指的是哪一部分？因爲你使用的小提琴沒有正確連接。 – ajmajmajma

我嘗試像這樣http://jsfiddle.net/nw5ndzrt/346/ – Kurkula

我已經改變了你的指令..

HTML

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

控制器

function ctrl($scope) {  

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

在這裏看到完整的代碼 http://jsfiddle.net/nw5ndzrt/345/

來源

2015-09-28 19:24:08

好點。謝謝。 – Kurkula

歡迎@Chandana .. –

另一種方法... 使用NG-開關
您可以通過多個div沒有CSS麻煩切換...

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

 
function MyCtrl($scope) { 
 
    
 
}

<script src="https://code.angularjs.org/angular-1.0.1.js"></script> 
 
<body ng-app="myApp"> 
 
<div ng-controller="MyCtrl"> 
 
\t <button ng-click="showDiv = !showDiv">test </button> 
 
\t <div ng-switch="showDiv" > 
 
\t <div ng-switch-default> 
 
\t \t hello you 
 
\t </div> 
 
\t <div ng-switch-when=true> 
 
\t \t hello me 
 
\t </div> 
 
\t </div> 
 
</div> 
 
</body>

來源

2016-12-02 17:49:40 Gi1ber7

Angularjs切換div的可見性

回答

相關問題