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

新手上路,请多包涵

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

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

我不想只使用 ng-show/ng-hide 然后将其分配给布尔 areaStatus,但我想要更复杂的东西,比如开/关/隐藏/透明/等等。

有没有一种方法可以在单击时在“打开”和“关闭”之间切换 areaStatus 而无需为其编写函数,只需使用内联表达式?

原文由 Sergei Basharov 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 308
2 个回答

你可以这样做(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 }">

我使用了“开”和“关”,但它应该是对您的模型有意义的值。

原文由 Michael Benford 发布,翻译遵循 CC BY-SA 3.0 许可协议

不太清楚你想要什么或者你为什么避免想要一个功能,但是我会去做我认为你想做的事情的一种方式:

 <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 你可以传入一个对象。 redgreen 将是您要应用的类。当以下表达式正确时,将应用它们。

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

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

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

原文由 EnigmaRM 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题