2015-09-28 15 views
8

Sto provando a commutare un div al clic di un pulsante. Ho provato a prendere una variabile scope e a passare dal nome alla classe in base alla variabile. Dove sto facendo l'errore hereAngularjs alterna la visibilità 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; 
} 

risposta

20

è possibile semplificare questo un po 'come in modo

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

Fiddle example

A meno che non è necessario lo specifico ng-class per attivare, nel qual caso si può fare qualcosa come

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

Fiddle example

(solo assicurarsi che si sta utilizzando una nuova versione di angolare per questo)

+0

provato in jsfiddle .. Questo non ha funzionato per me. – Kurkula

+0

@Chandana a quale parte ti riferisci? Il violino che stai utilizzando non è collegato correttamente. – ajmajmajma

+0

Ho provato in questo modo http://jsfiddle.net/nw5ndzrt/346/ – Kurkula

7

ho cambiato la tua direttiva ..

html

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

controller

function ctrl($scope) {  

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

vedere codice completo qui http://jsfiddle.net/nw5ndzrt/345/

+0

bello da indicare. Grazie. – Kurkula

+0

welcome @Chandana .. –

2

Un altro approccio ... Usa ng-switch
È possibile passare attraverso più div senza il fastidio 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>

Problemi correlati