angular ng-class 添加 class 除了当前

Question

我在 table 中有一个复选框，当我选中一个复选框时，我想将禁用 class 添加到所有其他复选框，我尝试使用 ng-class[=15 来实现这一点=]

<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;
    }
};

但是在页面加载所有复选框时使用它已禁用 class。

Answer 1

或许您可以在 currentid 上添加验证。仅当 'currentid' 中有内容且 $index 不是 currentid 时才添加 class。现在您可以在页面加载时将 currentid 设置为 undefined。

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

Answer 2

调用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 3

but using this when the page loads all checkboxes have disabled class.

这是因为在页面加载时，所有 $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 添加 class 除了当前

angular ng-class add class to all except current

javascript

angularjs

ng-class