禁用除选定选项以外的所有选项到使用ng-repeat生成的列表中

Question

有一个ng-repeat可以创建一个两级结构：

如果选中<div> <ul> <li ng-repeat="(key, group) in $ctrl.allLists"> <div> <i ng-click="$ctrl.toggleExpanded(key, $event)"></i> <i ng-click="$ctrl.toggleGroup(key, $event)"></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)"></i> </span> <span>{{ alert.Name}}</span> </div> </div> </li> </ul> ，则还会检查其所有子项，所有检查和取消选中功能都可以正常工作。

我想要添加的是，如果选择列表中的元素或所有元素，则禁用所有其他列表，反之亦然。

toggleExpanded(key, $event) {
    this.expanded[key] = !this.expanded[key];
}

toggleGroup(key) {
    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');
}

toggleAlertsByGroup(groupKey, toggleTo) {
    this.allLists[groupKey].forEach(alert => {
        if(toggleTo && !alert.isSelected) { //if already in selected array
            this.selectedAlerts.push(alert);
            alert.isSelected = true;
        } else if (!toggleTo && alert.isSelected) {
            _pull(this.selectedAlerts, alert);
            alert.isSelected = false;
        }
    });
    this.updateParameters();
}

toggleAlert(alertBinding, key) {
    this.alertTypeSelected = key;
    this.setAlert(alertBinding);
    this.checkGroup(key);
}

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;
    }
    this.updateParameters();
}

checkGroup(key) {
    const some = _some(this.allLists[key], 'isSelected');
    if (!some) {
        this.group[key] = 'empty';
    } else if (_every(this.allLists[key], 'isSelected')) {
        this.group[key] = 'all';
    } else {
        this.group[key] = 'partial';
    }
}

ng-disabled="$ctrl.alertTypeSelected && $ctrl.alertTypeSelected !== key"

上面的代码适用于从列表中选择/取消选择元素组的元素，我删除了css类以便更好地进行可视化。

我在选择列表时禁用其他列表时遇到困难，我正在使用ng-disabled。

我添加了<i ng-click="$ctrl.toggleGroup(key, $event)"></i>

进入

{{1}}行，当我检查元素时，它表示该元素已被禁用，但我仍然可以检查其他列表中的元素。

有什么建议吗？