如何使用ng-click对连续点击执行2个不同的操作？

Question

在我的角度应用程序中，我得到一个带有下拉列表的弹出窗口，以及列表中每个元素的3个按钮（第三个没有显示在图片中）。
我已经实现了，当你点击一个按钮它会改变背景，你可以在这里看到：

它的代码非常简单：

控制器：

this.selectedButtons = 'unconfirmed';


setButton(buttonState: string) {
        this.selectedButtons = buttonState;
    }

isButton(buttonState: string) {
        return buttonState === this.selectedButtons;
    }

观点：

ng-click="vm.setButton('declined')"

ng-class="{'Default' : vm.isButton('unconfirmed'), 'Confirmed' : vm.isButton('confirmed'), 'Declined' : vm.isButton('declined'), 'Deleted' : vm.isButton('deleted')}"

非常简单，当我点击其中一个按钮时，它会将var设置为其中一个字符串，然后使用ng-class调用该类等于该字符串。

按预期工作，但我遇到了问题，我也希望当你再次点击同一个按钮时，它会＆＃34;撤消＆＃34;你的选择，所以回到＆＃34;默认＆＃34;类。

我理解如何使用以下内容执行此操作：ng-click= test= !test 所以当你再次点击它会回到初始状态，但在这里我不知道如何实现它。

Answer 1

根据提供的代码，如果您想要“撤消”，那么您应该检查按钮是否处于更改状态，如果是，则将其更改回来：

this.selectedButtons = 'unconfirmed';


setButton(buttonState: string) {
        if (this.selectedButtons == buttonState) {
            this.selectedButtons = 'unconfirmed';
        }
        else {
            this.selectedButtons = buttonState;
        }
    }

isButton(buttonState: string) {
        return buttonState === this.selectedButtons;
    }