Come passare tra due valori di stringa come booleano True/False all'interno di AngularJS?

Question

Ho un pulsante, fare clic su di esso dovrebbe mostrare/nascondere un'area.

button(ng-click="areaStatus='on'") 
.area(ng-class="areaStatus") 

voglio di non usare solo ng-mostra/ng-nascondere e quindi assegnare a booleano areaStatus, ma voglio le cose più complesse come on/off/nascoste/trasparente/qualunque cosa.

C'è un modo per attivare areaStato tra "on" e "off" al clic senza dover scrivere una funzione per esso, solo con un'espressione in linea?

Answer 1

Si può fare questo (HTML):

<button ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</button> 

jsFiddle

Ma è molto brutto. Definirei sicuramente un metodo sull'oscilloscopio per modificare lo stato, specialmente se è più complicato di una semplice commutazione di due valori.

Tuttavia, se areaStatus è solo per cambiare la classe di area, penso che dovresti rilasciarlo, e invece cambiare la classe di conseguenza allo stato del tuo modello. Qualcosa di simile a questo:

function Ctrl($scope) { 
    $scope.state = 'on'; 

    $scope.changeState = function() { 
     $scope.state = $scope.state === 'on' ? 'off' : 'on'; 
    } 
} 

... 

<area ng-class="{'on': state, 'off': !state }"> 

ho usato 'on' e 'off', ma dovrebbe essere valori che abbiano un senso per il vostro modello.

Answer 2

non è troppo chiaro che cosa hai intenzione o perché si sta evitando che vogliono una funzione, ma un modo che mi piacerebbe andare a fare quello che ti pare voler fare:

<button ng-click="areaStatus = !areaStatus">Toggle</button> 
<div ng-class="{'red' : areaStatus, 'green' : !areaStatus}"> 
    This is some text 
</div> 

Ecco un fiddle that shows it as well e uno snippet di codice di seguito.

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

 
myModule.controller('myController', function ($scope) { 
 

 
    $scope.areaStatus = false; 
 
});

.red { 
 
    color:red; 
 
} 
 
.green { 
 
    color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
 
<div ng-app="myModule"> 
 
    <div ng-controller="myController"> 
 
     <button ng-click="areaStatus = !areaStatus">Toggle</button> 
 
     <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}"> 
 
      This is some text 
 
     </div> 
 
    </div> 
 
</div>

All'interno del ng-click basta semplicemente capovolgere il valore boolean di areaStatus. Con ng-class puoi passare in un oggetto. Il red e green sarebbero le classi che si desidera applicare. Verranno applicati quando l'espressione seguente è corretta.

Un'alternativa sarebbe quella di utilizzare angolare del {{ }} all'interno della vostra classe:

<div class="{{areaStatus}}"> </div> 

Quindi, se areaStatus contiene la stringa "hidden", allora questo è ciò di classe sarà in là. Ma avresti comunque bisogno di un modo per modificare il valore di areaStatus (in una funzione, più pulsanti o caselle di controllo).