如何在AngularJS中的两个字符串值之间切换,如布尔值True/False？

Question

我有一个按钮,点击它应该显示/隐藏一些区域.

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

我不想只使用ng-show/ng-hide然后将它分配给布尔areaStatus,但我想要更复杂的东西,比如on/off/hidden/transparent/whatever.

有没有办法在点击时"on"和"off"之间切换areaStatus,而不必为它编写函数,只需使用内联表达式？

Answer 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',但它应该是对你的模型有意义的值.

Answer 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>

在ng-click你内部,只需翻转boolean价值areaStatus.有了ng-class你可以传递一个对象.在red和green将要应用的类.当下面的表达式正确时,将应用它们.

另一种方法是{{ }}在你的班级中使用Angular :

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

所以如果areaStatus包含字符串"hidden",那么那就是那个类.但是你仍然需要一种方法来改变areaStatus(在函数,多个按钮或复选框中)的值.