Question

我在表格中有一个复选框，当我选中一个复选框时，我想将禁用的类添加到所有其他我尝试使用ng-class实现此目的

<td scope="row">
<input 
    type="checkbox"
    id="{{$index}}"
    ng-class="{disabled: $index != currentid}"      
    ng-click="showOptions($event,'$index')" />
</td>

控制器内部

$scope.showOptions=function($event,id){
    if($event.target.checked){    
        $scope.btns = true;
        $scope.details_tab = true;
        $scope.currentid = id;
    } 
    else {
        $scope.btns = false;
        $scope.details_tab = false;
    }
};

但在页面加载所有复选框时使用此选项已禁用类。

Answer 1

调用showOptions时，$index不需要是值为'$index'的字符串。它必须是值$index：

<td scope="row">
    <input type="checkbox" 
           id="{{$index}}" 
           ng-class="{disabled: $index != currentid}" 
           ng-click="showOptions($event, $index)"/>
</td>

否则，您将比较文字值$index和整数索引（例如0）。

Answer 2

也许你可以在currentid上添加验证。只有在＆＃39; currentid＆＃39;中有某些内容时才添加课程。 AND $ index尚未出现。现在，您可以在页面加载时将currentid设置为undefined。

<td scope="row"><input type="checkbox" id="{{$index}}" ng-class="{disabled: $index != currentid && currentid}" ng-click="showOptions($event,'$index')"></td>

Answer 3

但在页面加载所有复选框时使用此选项已禁用类。

这是因为在页面加载时，所有$ index值都不同于currentid，您只需在点击后设置。

您需要确保选中复选框：

$scope.showOptions = function ($event, id) {
    if ($event.target.checked) {
        $scope.btns = true;
        $scope.details_tab = true;
        $scope.currentid = id;
        $scope.disableCheckboxes = true; //checking a checkbox
    } else {
        $scope.btns = false;
        $scope.details_tab = false;
        $scope.disableCheckboxes = false; //unchecking a checked checkbox
    }
};

在HTML中，你需要考虑在ng-click内（你也不需要像其他人所说的$index上的引号）：

<td scope="row">
<input 
    type="checkbox"
    id="{{$index}}"
    ng-class="{disabled: disableCheckboxes && $index != currentid}"      
    ng-click="showOptions($event,$index)" />
</td>

angular ng-class将类添加到除current之外的所有类

3 个答案: