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

这表示如果用户选中此复选框，则还应检查所有其他复选框。现在我想要的是，如果特定用户点击thead上的复选框，则还要检查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>

使用表头angularjs中的复选框检查表体的所有复选框

1 个答案: