Как переключаться между двумя строковыми значениями, такими как boolean True/False внутри AngularJS?

У меня есть кнопка, нажатие на нее должно показать/скрыть некоторую область.

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

Я хочу не просто использовать ng-show/ng-hide, а затем назначить его логическому пространствуStatus, но мне нужны более сложные вещи, такие как on/off/hidden/transparent/whatever.

Есть ли способ переключить areaStatus между 'on' и 'off' при щелчке без необходимости писать для него функцию, только с встроенным выражением?

Ответ 1

Вы можете сделать это (HTML):

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

jsFiddle

Но это очень уродливо. Я бы определенно создал метод в области изменения состояния, особенно если он более сложный, чем просто переключение двух значений.

Однако, если areaStatus - это просто изменить класс области, я думаю, вы должны его отбросить и вместо этого изменить класс в соответствии с вашим состоянием модели. Что-то вроде этого:

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

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

...

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

Я использовал 'on' и 'off', но это должны быть значения, которые имеют смысл для вашей модели.

Ответ 2

Не слишком понятно, чего вы хотите или почему вы избегаете желания функции, но способ, которым я буду заниматься тем, что, как я думаю, вы хотите сделать:

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

Вот скрипт который показывает его также, а также фрагмент кода ниже.

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>