第二次單擊時，Angular ng-click 會切換

Question

試圖找出使用 ng-click 切換按鈕的最簡單實現，如果用戶第二次選擇它，如果他們第三次點擊則返回。 基本上，我現在使用的是帶有 4 個不同按鈕的 ng-click 和 ng-show，下面顯示了一個例子，它可以工作，但我現在的要求是，如果用戶再次選擇按鈕，它會顯示下面的 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 。