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

Issue

I have a button, clicking on it should show/hide some area.

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

I want not to just use ng-show/ng-hide and then assign it to Boolean areaStatus, but I want more complex things like on/off/hidden/transparent/whatever.

Is there a way to toggle areaStatus between 'on' and 'off' on click without having to write a function for it, just with an inline expression?

Solution

You can do this (HTML):

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

jsFiddle

But it's very ugly. I would definitely create a method on the scope to change the state, especially if it's more complicated than just toggling two values.

However, if areaStatus is just to change the area class, I think you should drop it, and instead change the class accordingly to your model state. Something like 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' and 'off', but it should be values that make sense to your model.

Answered By - Michael Benford