Wie kann man zwischen zwei String-Werten wie booleschen True/False innerhalb von AngularJS umschalten?

Question

Ich habe eine Schaltfläche, klicken Sie darauf sollte ein Bereich zeigen/verstecken.

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

Ich möchte nicht nur ng-Show/ng-hide zu verwenden, und weisen Sie dann auf Boolean areaStatus, aber ich möchte komplexere Dinge wie Ein/Aus/hidden/transparent/was auch immer.

Gibt es eine Möglichkeit, um Area-Status zwischen "Ein" und "Aus" beim Klicken umzuschalten, ohne dafür eine Funktion schreiben zu müssen, nur mit einem Inline-Ausdruck?

Answer 1

können Sie tun dies (HTML):

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

jsFiddle

Aber es ist sehr hässlich. Ich würde definitiv eine Methode für den Bereich erstellen, um den Status zu ändern, besonders wenn es komplizierter ist, als nur zwei Werte zu wechseln.

Wenn jedoch areaStatus ist nur die Gebietsklasse zu ändern, ich denke, Sie sollten es fallen lassen, und ändern Sie stattdessen die Klasse entsprechend Ihrem Modellstatus. Etwas wie folgt aus:

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

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

... 

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

ich verwendet habe, ‚auf‘ und ‚off‘, aber es sollte Werte sein, die sinnvoll für Ihr Modell zu machen.

Answer 2

Es ist nicht ganz klar, was Sie wollen oder warum Sie vermeiden eine Funktion zu wollen, sondern ein Weg, den ich gehen würde, um zu tun, was ich denke, Sie tun möchten:

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

ist hier ein fiddle that shows it as well sowie ein Code-Snippet unten.

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>

Innerhalb der ng-click Sie einfach nur klappen Sie den boolean Wert von areaStatus. Mit ng-class können Sie ein Objekt übergeben. Die Klassen red und green sind die Klassen, die Sie anwenden möchten. Sie werden angewendet, wenn der folgende Ausdruck korrekt ist.

Eine Alternative wäre Eckige zu gebrauchen {{ }} in Ihrer Klasse:

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

Also, wenn areaStatus die Zeichenfolge "hidden" enthält, dann ist das, welche Klasse in da sein. Aber Sie müssen immer noch einen Weg finden, um den Wert von areaStatus zu ändern (entweder in einer Funktion, mehreren Schaltflächen oder Checkboxen).