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

gcxthw6b  于 2022-10-31  发布在  Angular
关注(0)|答案(3)|浏览(288)

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

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

我不想仅仅使用ng-show/ng-hide,然后将其分配给Boolean areaStatus,而是我想要更复杂的东西,比如on/off/hidden/transparent/whatever。
有没有一种方法可以在单击时在“on”和“off”之间切换areaStatus,而不必为它编写函数,只需使用一个内联表达式?

h5qlskok

h5qlskok1#

您可以这样做(HTML):

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

jsFiddle
我肯定会在作用域上创建一个方法来改变状态,特别是如果它比仅仅切换两个值更复杂的话。
然而,如果areaStatus只是改变area类,我认为你应该放弃它,而根据你的模型状态相应地改变类。

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”,但它们应该是对您的模型有意义的值。

weylhg0b

weylhg0b2#

我不太清楚你想要什么,也不清楚为什么你不想要一个函数,但我认为你想做的事情是这样的:

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

下面是一个fiddle that shows it as well以及下面的代码片段。
第一个
ng-click中,你只需要简单地翻转areaStatusboolean值。使用ng-class,你可以传入一个对象。redgreen将是你要应用的类。当下面的表达式正确时,它们将被应用。
另一种方法是在类中使用Angular的{{ }}

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

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

bqf10yzr

bqf10yzr3#

我认为内联更改是一个好主意:

(ngModelChange)="data.is_toggole=(data.is_toggole== 0 ? 0 : 1)"

data.is_切换//您的变量

相关问题