檢查表體的所有複選框，在表頭的複選框angularjs

Question

<table id="table" class="table table-bordered font" style="width: 100%; padding-top:10px;"> 
       <thead> 
        <tr class="bg-primary textalign"> 
         <th>Details</th> 
         <th>SonVin Id</th> 
         <th>Date</th> 
         <th>Venue Name</th> 
         <th>City</th> 
         <th>Area</th> 
         <th>Amount</th> 
         <th><input type="checkbox" ng-model="checkall" /><span style="margin-left:10px;">Add Invoice</span></th> 
        </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="data in getdataintable"> 
         <td><a href="#" class="btn btn-success" style="cursor:pointer">Details</a></td> 
          <td>{{data.sonvinid}}</td> 
         <td>{{data.date}}</td> 
         <td>{{data.venuename}}</td> 
         <td>{{data.location}}</td> 
         <td>{{data.area}}</td> 
         <td>{{data.amount}}</td> 
         <td><input type="checkbox" ng-model="check" /></td> 
        </tr> 
        </tbody> 
      </table> 

這是我的表， 這裏我有這條線（<th><input type="checkbox" ng-model="check" /><span style="margin-left:10px;">Add All Invoice</span></th>）。

這表示如果用戶選中了此複選框，則也應該檢查所有其他複選框。 現在我想要的是，如果一個特定的用戶點擊了一個複選框，所有的td複選框也被檢查，所有的數據應該存儲在我的angularjs控制器的數組中。

$scope.storeall=[]; 

我想angularjs要做到這一點，在這裏任何人都 誰可以幫我嗎？

Answer 1

讓你的控制器內的一些類似這樣的

方法的方法來選擇取消選擇所有

方法之間的上述

var app = angular.module('app',[]) // the app module 
app.controller('tableCtrl',function($scope){ 
    $scope.storeall = []; 
    $scope.selectAllFlag = false; 
    $scope.getdataintable = [ 
     {sonvinid:1, date : "string" , venuename: "String Name" }, 
     {sonvinid:2, date : "string" , venuename: "String Name" } 
    ]; 
    $scope.checkAllToggle = funciton(){ 
     if(!$scope.selectAllFlag){ 
     $scope.selectAll(); 
     $scope.selectAllFlag = true; 
     }else { 
     $scope.deselectAll(); 
      $scope.selectAllFlag = false; 
     } 
    }; 
    $scope.selectAll = function(){ 
     for (var i = 0 ; i < $scope.data.length ; i++){ 
      $scope.getdataintable[i].selected = true; 
      $scope.storeall.push($scope.data[i].sonvinid); 
     } 
    }; 

    $scope.deselectAll = function(){ 
     for (var i = 0 ; i < $scope.data.length ; i++){ 
      $scope.getdataintable[i].selected = false; 
      $scope.storeall = []; 
     } 
    }; 
}); 

把它用在HTML所有

法切換：

<table id="table" class="table table-bordered font" ng-controller="tableCtrl" style="width: 100%; padding-top:10px;"> 
       <thead> 
        <tr class="bg-primary textalign"> 
         <th>Details</th> 
         <th>SonVin Id</th> 
         <th>Date</th> 
         <th>Venue Name</th> 
         <th>City</th> 
         <th>Area</th> 
         <th>Amount</th> 
         <th><input type="checkbox" ng-model="checkAllToggle()" /><span style="margin-left:10px;">Add Invoice</span></th> 
        </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="data in getdataintable"> 
         <td><a href="#" class="btn btn-success" style="cursor:pointer">Details</a></td> 
          <td>{{data.sonvinid}}</td> 
         <td>{{data.date}}</td> 
         <td>{{data.venuename}}</td> 
         <td>{{data.location}}</td> 
         <td>{{data.area}}</td> 
         <td>{{data.amount}}</td> 
         <td><input type="checkbox" ng-checked="data.selected" /></td> 
        </tr> 
        </tbody> 
      </table>