复选框 check/uncheck 无法与 angularjs 一起正常工作

Question

我正在做一个项目，我在 Asp.net MVC 中使用部分视图，在该部分视图中有一个 html table 并且在 table header 单击该复选框时会出现一个复选框，除 table body 数据外，所有复选框都应选中，如果来自 table body 数据，则任何复选框未选中然后顶部 header 复选框也应取消选中。此功能适用于我当前的代码，但如果我取消选中顶部 header 复选框并再次选中它并尝试取消选中任何 table body 数据复选框顶部 header 复选框没有被取消选中我无法弄清楚为什么这不起作用

这是我的代码

<table class="table table-condensed table-bordered table-hover left" style="width:100%;margin:0px;">
                        <thead>
                            <tr>
                                <th>
 <input type="checkbox" style="margin: 3px 0;" ng-model="IsAllChecked" ng-change="CheckUncheckAll(IsAllChecked)" ng-checked="isChecked"/>
                                </th>
                                <th><label>Name</label></th>
                                <th><label>City</label></th>
                                <th><label>Country</label></th>
                            </tr>
                        </thead>

                        <tr ng-repeat="clientData in $Clients.Clients| orderBy:'Name'|limitTo: totalDisplayed | filter: searchClient"
                            ng-mouseover="MouseOverOnUnassigned(clientData );" ng-mouseleave="MouseLeaveOnUnassigned(clientData)">

                            <td>
 
                                <input type="checkbox" ng-model="clientData.IsSelectedClients" ng-change="CheckUncheckHeader(clientData.IsSelectedClients)" />
                            </td>
                            <td>{{clientData.Client}}</td>
                            <td>{{clientData.City}}</td>
                            <td>{{clientData.Country}}</td>
                           
                        </tr>
                    </table>

还有我的angularjs代码

$scope.CheckUncheckHeader = function (checked) {
    $scope.isChecked = true;
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        if (!$scope.$Client.Clients[i].IsSelectedClients) {
            $scope.isChecked = false;
            break;
        }
    };
};

$scope.CheckUncheckAll = function (IsAllChecked) {
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        $scope.$Client.Clients[i].IsSelectedClients= IsAllChecked;
    }
};

任何人body 都可以说出实现此目标而不会失败的最佳方法是什么吗？提前致谢

Answer 1

请尝试使用以下代码。祝你好运

$scope.CheckUncheckAll = function (IsAllChecked) {
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        if(IsAllChecked == true) 
        {
            $scope.$Client.Clients[i].IsSelectedClients= true;
            $scope.isChecked = true;
        } else 
        {
           $scope.$Client.Clients[i].IsSelectedClients= false;
           $scope.isChecked = false;
        }
    }
};

复选框 check/uncheck 无法与 angularjs 一起正常工作

Checkbox check/uncheck not working properly with angularjs

javascript

checkbox

asp.net-mvc

jquery

angularjs