AngularJS ng-repeat列表：选中组后禁用其他组的功能实现问题

我来帮你搞定这个问题！你遇到的核心痛点是：ng-disabled只是给元素加上了disabled属性，但不会阻止自定义ng-click事件的触发——它只对原生表单控件（比如<button>、<input>）生效。所以咱们得从两个方面入手：一是保留ng-disabled做样式提示，二是在点击方法里主动判断是否禁用，阻止后续逻辑执行。

具体修复步骤 #

1. 添加禁用状态判断方法 #

先在你的控制器里新增一个方法，用来判断某个组是否应该被禁用：

isGroupDisabled(key) {
  // 规则：当有选中的组/子项，且当前组不是选中的组时，禁用
  return this.alertTypeSelected && this.alertTypeSelected !== key;
}

2. 修改HTML模板 #

给所有需要禁用的点击元素加上ng-disabled（用来显示禁用样式），同时确保后续JS逻辑会检查禁用状态：

<div> 
  <ul> 
    <li ng-repeat="(key, group) in $ctrl.allLists"> 
      <div> 
        <i ng-click="$ctrl.toggleExpanded(key, $event)" ng-disabled="$ctrl.isGroupDisabled(key)"></i>
        <i ng-click="$ctrl.toggleGroup(key, $event)" ng-disabled="$ctrl.isGroupDisabled(key)"></i>
        <span>{{key}}</span> 
        <span></span> 
      </div> 
      <div ng-show="$ctrl.expanded[key]"> 
        <div ng-repeat="alert in group"> 
          &nbsp;&nbsp;<i></i> 
          <span class="rtm-property-selector__switch"> 
            <i ng-click="$ctrl.toggleAlert(alert, key)" ng-disabled="$ctrl.isGroupDisabled(key)"></i>
          </span> 
          <span>{{ alert.Name}}</span> 
        </div> 
      </div> 
    </li> 
  </ul> 
</div>

3. 修改所有点击方法，添加禁用判断 #

在toggleExpanded、toggleGroup、toggleAlert这三个方法的开头，先检查当前组是否被禁用，如果是就直接返回，不执行后续逻辑：

修改toggleExpanded：

toggleExpanded(key, $event) {
  if (this.isGroupDisabled(key)) return; // 新增判断
  this.expanded[key] = !this.expanded[key];
}

修改toggleGroup：

toggleGroup(key) {
  if (this.isGroupDisabled(key)) return; // 新增判断
  this.alertTypeSelected = key;
  if ( !this.group[key] || this.group[key] === 'empty' || this.group[key] === 'partial') {
    this.group[key] = 'all';
  } else {
    this.group[key] = 'empty';
  }
  this.toggleAlertsByGroup(key, this.group[key] === 'all');
}

修改toggleAlert：

toggleAlert(alertBinding, key) {
  if (this.isGroupDisabled(key)) return; // 新增判断
  this.alertTypeSelected = key;
  this.setAlert(alertBinding);
  this.checkGroup(key);
}

4. 处理取消选中后的恢复逻辑 #

当所有选中项都被取消时，需要清空alertTypeSelected，让所有组恢复可用。咱们在setAlert方法的最后加上这个判断：

setAlert(alertBinding) {
  if (this.selectedAlerts.find(a => a.AlertBindingId === alertBinding.AlertBindingId)) {
    _pull(this.selectedAlerts, alertBinding);
    alertBinding.isSelected = false;
  } else {
    this.selectedAlerts.push(alertBinding);
    alertBinding.isSelected = true;
  }
  // 新增：当没有选中项时，清空选中组标记
  if (this.selectedAlerts.length === 0) {
    this.alertTypeSelected = null;
  }
  this.updateParameters();
}

为什么这样能解决问题？ #

• ng-disabled用来给元素添加禁用样式，让用户直观看到哪些组不可操作；
• 在点击方法开头加入禁用判断，从逻辑上阻止了禁用组的点击事件执行；
• 取消所有选中项时清空alertTypeSelected，确保其他组能恢复可用状态。

内容的提问来源于stack exchange，提问作者Leo Messi