角複選框「全選」功能不能正常工作

我有這樣
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>

控制器

$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'); 
     } 

    }

我必須使用單獨的複選框納克-repeat，並選擇所有複選框。首先當我選擇等所有的個人選擇框，檢查框會自動檢查，如我所料，也檢查所有也選擇所有個別複選框，因爲我的預期，但問題是，如果我先單擊checkall複選框和所有單個項目下，它將無法正常工作如我所料（checkall複選框將不會被選中或取消選中）。
我嘗試了一些堆棧溢出的答案，但它是一樣的。誰能告訴我如何。請

來源

2016-08-02 codelearner

我沒有讀過你的問題，但切換所有複選框這個代碼將work.this是例如你必須操縱它。你可以看看這裏。 https://plnkr.co/edit/qD7CABUF9GLoFCb8vDuO?p=preview

var app = angular.module("test", []); 
    app.controller('testctrl',function($scope){ 

     $scope.options=[ 

     {option:"option1", 
      selected:false , 

     }, 
     {option:"option1", 
      selected:false , 

     }, 
     {option:"option1", 
      selected:false , 

     }, 
     {option:"option1", 
      selected:false , 

     }, 
     {option:"option1", 
      selected:false , 

     }, 


     ] 

     $scope.test=function(event){ 

     if(event.currentTarget.checked==true) 
     { 
     var togglestatus=$scope.isAllSelected; 
     angular.forEach($scope.options,function(object){ 

      object.selected=togglestatus 

     }) 



<body ng-app="test" ng-controller="testctrl"> 
    <label> 
    <input type="checkbox" ng-model="isAllSelected" ng-click="test($event)">SelectAll</label> 

    <div ng-repeat="option in options"> 
    <input type="checkbox" ng-model="option.selected">checkbox</div> 

    </body>  


     }else{ 
      angular.forEach($scope.options,function(object){ 

      object.selected=false 

     }) 
     } 
     } 
    })

來源

2016-08-02 13:20:21

謝謝。我已經嘗試過這種方式，它可以在笨重的環境下工作。但不是在我的代碼。你可以請檢查我的問題有什麼不對 – codelearner

我已經修改了代碼，使其工作：

$scope.checkall=false; 
    $scope.allCheckBox=[]; 
    $rootScope.selected = []; 
    $scope.payout = [{ 
    '_id': 1, 
    value: 'Option1' 
    }, { 
    '_id': 2, 
    value: 'Option2' 
    }]; 

    $scope.toggleAll = function() { 
    $scope.checkall = !$scope.checkall; 
    $rootScope.selected = []; 
    $scope.allCheckBox=[]; 

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


    $scope.selectItem = function(id) { 

    console.log('id', id); 
    var idx = $rootScope.selected.indexOf(id); 
    if (idx > -1) { 
     $rootScope.selected.splice(idx, 1); 
    } else { 
     $rootScope.selected.push(id); 
    } 
    if ($scope.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'); 
    } 

    }

HTML：

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

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

普拉克：https://plnkr.co/edit/SmabE9?p=preview

來源

2016-08-02 14:06:37

我已經添加了plunker鏈接 –

其工作fine.but我需要更多的代碼優化使用angular.forEach而不是循環 –

這裏的主要問題是，你正在分配ng-model添加到「checkall」複選框和一個用於調用函數的ng-click h再次定義$ scope.checkall的值。

您不需要那樣做，因爲ng-model已經爲您設置了該變量的值。

看看這個小提琴，用相同的代碼，你提供的，但與修復： 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) { 
 

 
    \t // 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>

來源

2016-08-02 16:41:57

偉大的！謝謝。它在jsfiddle中有效。但是當我將相同的代碼複製到項目中時，我得到的'$ scope.checkall'在控制檯console.log（'if'，$ scope.checkall）中未定義;'。當我點擊最初切換所有複選框時，在函數'toggleAll'內部，但是它在jsfiddle中給出了控制檯的false。你能告訴我爲什麼我得到undefined – codelearner

和我點擊單個項目後，然後如果我點擊檢查所有，檢查所有將顯示每次如果條件（false） – codelearner

@codelearner：我已經添加plunker鏈接到我的回答。這是你的代碼，小問題解決。你可以簡單地將它粘貼到你的項目中。 –

角複選框「全選」功能不能正常工作

回答

相關問題