Jak przełączać między dwiema wartościami ciągu, takimi jak boolean True/False wewnątrz AngularJS?

Question

Mam przycisk, klikając na nim powinien pokazać/ukryć jakiś obszar.

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

nie chcę po prostu użyć ng-show/NG-hide a następnie przypisać je do logicznego areaStatus, ale chcę bardziej skomplikowane rzeczy jak on/off/ukryte/przezroczysty/cokolwiek.

Czy istnieje sposób przełączania areaStatus między "on" i "off" na kliknięcie bez konieczności pisania dla niego funkcji, tylko z wyrażeniem śródliniowym?

Answer 1

Można to zrobić (HTML):

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

jsFiddle

Ale to bardzo brzydkie. Zdecydowanie utworzę metodę w zakresie zmiany stanu, szczególnie jeśli jest to bardziej skomplikowane, niż tylko przełączanie dwóch wartości.

Jednakże, jeśli areaStatus służy tylko do zmiany klasy obszaru, myślę, że powinieneś ją upuścić, a zamiast tego zmienić klasę odpowiednio do stanu twojego modelu. Coś takiego:

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

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

... 

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

Użyłem „on” i „off”, ale powinno to być wartości, które mają sens dla danego modelu.

Answer 2

nie jest zbyt jasne, czego chcą lub dlaczego unika chcąc funkcję, ale sposób, że pójdę o tym, co myślę, że chcesz zrobić:

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

Oto fiddle that shows it as well oraz fragment kodu poniżej.

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>

W ramach ng-click ty po prostu odwrócić wartość boolean z areaStatus. Dzięki ng-class możesz przekazać obiekt. red i green będą klasami, które chcesz zastosować. Zostaną zastosowane, gdy poniższe wyrażenie jest poprawne.

Alternatywą byłoby użyć kątowy na {{ }} ciągu swojej klasie:

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

Więc jeśli areaStatus zawiera ciąg "hidden", to jest to, co klasa będzie tam. Ale nadal potrzebujesz sposobu, aby zmienić wartość areaStatus (w funkcji, wielu przyciskach lub polach wyboru).