javascript - How to toggle between two string values like boolean True/False inside AngularJS? -

i have button, clicking on should show/hide area.

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

i want not use ng-show/ng-hide , assign boolean areastatus, want more complex things on/off/hidden/transparent/whatever.

is there way toggle areastatus between 'on' , 'off' on click without having write function it, inline expression?

you can (html):

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

jsfiddle

but it's ugly. create method on scope change state, if it's more complicated toggling 2 values.

however, if areastatus change area class, think should drop it, , instead change class accordingly model state. this:

function ctrl($scope) {     $scope.state = 'on';      $scope.changestate = function() {         $scope.state = $scope.state === 'on' ? 'off' : 'on';     } }  ...  <area ng-class="{'on': state, 'off': !state }"> 

i've used 'on' , 'off', should values make sense model.