用表头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>）。

这表示如果用户选中此复选框，则所有其他复选框也应选中。 现在我想要的是如果一个特定的用户点击了tad上的一个复选框，td的所有复选框也被选中，<td>{{data.sonvinid}}</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>