javascript - Angular 复选框 “Select All” 功能不起作用

Question

我有这样的代码
HTML

 <div class="check_toggle" ng-click="toggleAll(payout)">                               
         select all
   <input type="checkbox" aria-label="Art"  ng-model="checkall"/>
 </div>

<table>
<thead>
  <tr>
    <th>Week</th>
    <th>Release Payment</th>
  </tr>
</thead>
<tbody>

  <tr ng-repeat="item in payout">
    <td>{{item.value}}</td>

    <td>
      <div class="checkbox pay_check">

        <input aria-label="Art" type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id,selected,payout)">

      </div>
    </td>
  </tr>
</tbody>

Controller

 $scope.payout= [
{'_id':1, value:'Option1'},  
{'_id':2, value:'Option2'}
];

 $scope.toggleAll = function(payout) {

        $scope.checkall = !$scope.checkall;
        for(var i=0;i<payout.length;i++){
             if($scope.checkall===false){
                   $rootScope.selected=[];
                   $scope.allCheckBox[i] = $scope.checkall ;
             }else{
                 $rootScope.selected[i]=payout[i]._id;
                 $scope.allCheckBox[i] =$scope.checkall ;
             }

        }
 }


    $scope.selectItem = function(id, list,payout) {

        console.log('id',id);
        var idx = list.indexOf(id);
        if (idx > -1) {
            list.splice(idx, 1);
        } else {
            list.push(id);
        }
         if(payout.length==$rootScope.selected.length){
            $scope.checkall=true;
            console.log($scope.checkall);
            // $scope.checkall=  $scope.checkall;
            console.log('All checkboxes selected');
        }
        else{
            $scope.checkall=false;
             console.log('Not All checkboxes selected');
        }

    }

我使用 ng-repeat 有单独的复选框，并选择所有复选框。首先，当我选择所有单独的选择框时，所有复选框将按我的预期自动选中，并检查所有复选框，并按我的预期选择所有单独的复选框，但问题是，如果我先单击复选框，然后单击所有单独的项目，它将无法按我的预期工作(复选框不会根据选择被选中或取消选中)。
我尝试了一些堆栈溢出答案，但它是相同的。谁能告诉我怎么做。请

Answer 1

这里的主要问题是，您将 ng-model 分配给“checkall”复选框，并且 ng-click 调用一个函数，在该函数中您再次定义 $scope.checkall 的值。

您不需要这样做，因为 ng-model 已经为您设置了该变量的值。

使用您提供的相同代码检查这个 fiddle ，但进行了修复: https://jsfiddle.net/h46rLzhs/5/

 angular.module('MyApp',[])
    .controller('MyController', function($rootScope, $scope){
     $rootScope.selected=[];
     $scope.allCheckBox=[];
     $scope.payout= [
         {'_id':1, value:'Option1'},  
         {'_id':2, value:'Option2'}
     ];

     $scope.toggleAll = function(payout) {

    	// Line below is not needed
        //$scope.checkall = !$scope.checkall;
        for(var i in payout){
           if($scope.checkall===false){
                $rootScope.selected=[];
                $scope.allCheckBox[i] = $scope.checkall ;
           }else{
                $rootScope.selected[i]=payout[i]._id;
                $scope.allCheckBox[i] =$scope.checkall ;
           }
        }
     }

     $scope.selectItem = function(id, list,payout) {

         console.log('id',id);
         var idx = list.indexOf(id);
         if (idx > -1) {
             list.splice(idx, 1);
         } else {
             list.push(id);
         }
         if(payout.length==$rootScope.selected.length){
             $scope.checkall=true;
             console.log($scope.checkall);
             // $scope.checkall=  $scope.checkall;
             console.log('All checkboxes selected');
         }
         else{
             $scope.checkall=false;
             console.log('Not All checkboxes selected');
         }
     }
 })

<div ng-app="MyApp">
  <div ng-controller="MyController">
    
   <div ng-click="toggleAll(payout)">
         select all
     <input type="checkbox" ng-model="checkall"/>
   </div>

   <table>
   <thead>
    <tr>
       <th>Week</th>
       <th>Release Payment</th>
    </tr>
  </thead>
  <tbody>

    <tr ng-repeat="item in payout">
      <td>{{item.value}}</td>

      <td>
        <input type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id,selected,payout)">
      </td>
    </tr>
    </tbody>
   </table>
  </div>
</div>