复选框选中/取消选中无法与 angularjs 一起正常工作

Posted 2023-05-08

【中文标题】复选框选中/取消选中无法与 angularjs 一起正常工作

【英文标题】：Checkbox check/uncheck not working properly with angularjs

【发布时间】：2021-09-04 08:42:29

【问题描述】：

我正在做一个项目，我在 Asp.net MVC 中使用部分视图，在该部分视图中有一个 html 表，在表头中有一个复选框，单击该复选框除了应检查表体数据，如果未选中表体数据中的任何复选框，则也应取消选中顶部标题复选框。此功能正在与我当前的代码一起使用，但是如果我取消选中顶部标题复选框并再次选中它并尝试取消选中任何表格正文数据复选框顶部标题复选框没有被取消选中我无法弄清楚为什么这不起作用

这是我的代码

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

还有我的 Angular js 代码

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

谁能告诉我什么是实现这一目标的最佳方法而不会失败。提前致谢

【问题讨论】：

***.com/questions/20968170/… 回答你的问题了吗？

@Harkiratsingh 不，这是在循环 ng-repeat 我想要不同的，看看我的代码

【参考方案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;
        
    
;