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

Question

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?

Answer 1

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.

Answer 2

It's not too clear what you're wanting or why you are avoiding wanting a function, but a way that I'd go about doing what I think you want to do:

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

Here is a fiddle that shows it as well as well as a code snippet below.

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>

Within the ng-click you just simply flip the boolean value of areaStatus. With ng-class you can pass in an object. The red and green would be the classes that you want to apply. They will be applied when the expression following is correct.

An alternative would be to use Angular's {{ }} within your class:

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

So if areaStatus contains the string "hidden", then that is what class will be in there. But you'd still need a way to then change the value of areaStatus (either in a function, multiple buttons, or checkboxes).