如何使用ng-click实现连续点击触发两种不同操作？

结合你现有的代码逻辑，要实现同一个按钮连续点击触发两种不同操作，核心是跟踪按钮的当前状态/点击次数，在点击事件里根据状态分支执行不同逻辑。下面是两种常见场景的具体实现：

场景1：单个按钮在两种状态间切换（点击选中，再点击取消/切换） #

如果需求是点击按钮第一次切换到选中状态，第二次切换回初始状态（或另一种状态），可以这样修改：

控制器代码 #

// 初始化选中状态，这里初始设为null表示未选中
this.selectedButtons = null;

// 修改setButton方法，加入状态判断
this.setButton = function(buttonState) {
  if (this.selectedButtons === buttonState) {
    // 当前已选中该按钮，点击后执行第二种操作（比如取消选中）
    this.selectedButtons = null;
    // 这里添加第二种操作的逻辑，比如重置数据、发送取消请求等
    console.log('执行取消/第二种操作');
  } else {
    // 未选中，点击后执行第一种操作（比如设置选中状态）
    this.selectedButtons = buttonState;
    // 添加第一种操作的逻辑，比如标记状态、发送确认请求等
    console.log('执行选中/第一种操作');
  }
};

// 保持原有的isButton判断逻辑
this.isButton = function(buttonState) {
  return buttonState === this.selectedButtons;
};

视图代码 #

<button ng-click="vm.setButton('unconfirmed')" 
        ng-class="{'active-bg': vm.isButton('unconfirmed')}">
  未确认
</button>

场景2：多个按钮各自独立的双操作切换 #

如果你的popover里有多个按钮，每个按钮都需要独立支持连续点击触发不同操作，就需要给每个按钮单独维护状态：

控制器代码 #

this.selectedButtons = 'unconfirmed';
// 用对象存储每个按钮的切换状态，初始为false表示第一次点击
this.buttonToggleStates = {
  unconfirmed: false,
  declined: false,
  // 其他按钮的key，对应你的下拉列表元素
};

this.setButton = function(buttonState) {
  const currentToggle = this.buttonToggleStates[buttonState];
  if (!currentToggle) {
    // 第一次点击：执行操作A，比如设置基础选中状态
    this.selectedButtons = buttonState;
    console.log(`按钮${buttonState}执行操作A`);
    // 这里可以添加操作A的具体逻辑，比如调用接口、更新页面数据
  } else {
    // 第二次点击：执行操作B，比如切换到进阶状态
    this.selectedButtons = `${buttonState}_secondary`;
    console.log(`按钮${buttonState}执行操作B`);
    // 添加操作B的具体逻辑
  }
  // 切换该按钮的状态，下次点击触发另一种操作
  this.buttonToggleStates[buttonState] = !currentToggle;
};

// 调整isButton方法，支持判断两种状态
this.isButton = function(buttonState) {
  return this.selectedButtons === buttonState || this.selectedButtons === `${buttonState}_secondary`;
};

// 可选：如果需要区分两种状态，新增判断方法
this.isButtonSecondary = function(buttonState) {
  return this.selectedButtons === `${buttonState}_secondary`;
};

视图代码 #

<!-- 示例按钮，根据两种状态设置不同样式 -->
<button ng-click="vm.setButton('unconfirmed')" 
        ng-class="{
          'active-bg': vm.isButton('unconfirmed'),
          'secondary-bg': vm.isButtonSecondary('unconfirmed')
        }">
  未确认
</button>

核心逻辑说明 #

• 通过状态变量（单个变量或对象）记录按钮的点击次数/当前状态，每次点击时根据状态分支执行不同逻辑。
• 点击后切换状态变量，确保下次点击触发另一种操作，形成循环。
• 样式部分可以通过ng-class根据不同状态切换背景或其他样式，和你原有的逻辑完全兼容。

内容的提问来源于stack exchange，提问作者AJ-