javascript - 第二次单击时 Angular ng-click 切换

Question

尝试设计一个最简单的实现，让一个按钮使用 ng-click 在用户第二次选择它时进行切换，然后在他们第三次单击时返回。基本上，我现在所拥有的是使用带有 4 个不同按钮的 ng-show 的 ng-click，下面显示了一个示例并且它有效，但我现在的要求是如果用户再次选择该按钮，它会取消显示下面的 div .不认为为此同时使用 ng-show 和 ng-hide 是一种很好的做法，并且看不到 ng-toggle 是如何工作的。有什么帮助吗？

示例代码:

<div id="alerts">
    <div class="alertBtns">
        <input type="button" class="naviaBtn naviaBlue" ng-click="alertShow =2" value="outstanding swipes">
        <input type="button" class="naviaBtn naviaBlue" ng-click="alertShow =3" value="recent denials">
        <input type="button" class="naviaBtn naviaBlue" ng-click="alertShow =4" value="upcoming dates">
        <input type="button" class="naviaBtn naviaBlue" ng-click="alertShow =5" value="account alerts">
    </div>
    <div class="alertGrids">
        <div ng-show="alertShow==1"></div>
        <div ng-show="alertShow==2">
        </div>
        <div ng-show="alertShow==3" class="alertDenials">
        </div>
        <div ng-show="alertShow==4" class="alertDates">
        </div>
        <div ng-show="alertShow==5" class="alertAccounts">
        </div>
    </div>
</div>

Answer 1

您可以根据alertShow的当前值设置该值。示例:

<input type="button" class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 2 ? -1 : 2)" value="outstanding swipes">
<input type="button" class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 3 ? -1 : 3)" value="recent denials">
<input type="button" class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 4 ? -1 : 4)" value="upcoming dates">
<input type="button" class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 5 ? -1 : 5)" value="account alerts">

如果您尝试再次点击同一个按钮，alertShow 的值将变为 -1。