如何使用表中的全选复选框获取所有数据？

Posted 2023-05-09

【中文标题】如何使用表中的全选复选框获取所有数据？

【英文标题】：how to get all data using select all checkbox in table?

【发布时间】：2018-03-14 05:33:06

【问题描述】：

您好，我正在尝试一次获取所有数据，然后单击 checkbox，但是数据没有来但是当我一一点击数据ID时 未来。但我的问题是如何获取checkbox 中的所有数据 单click。

这是HTML代码

<div id="wrapper" class="wrapper">
    <div ng-include="'views/partials/navigator.html'"></div>
    <div class="page-content-wrapper">
        <div ng-include="'views/partials/header.html'"></div>
        <div class="row">
            <div class="col-md-12">
                <h3>Student Information</h3>



                <table id="example" class="table">
                    <tr>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Siblling</th>
                        <th>select all <input type="checkbox" id="slctAllDuplicateStd"/></th>

                    </tr>
                    <tr ng-repeat="data in vm.data">
                        <td>data.name</td>
                        <td>data.mobileNumber</td>
                        <td>data.isMigrated</td>
                        <td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
                    </tr>
                    <tr>
                    <tr>
                    <button class ="button" ng-click="vm.process()">Process</button>
                    </tr>
                </table>
                    <table class="table">
                        <tr>
                            <td colspan="4">
                                <pagination ng-if="renderpagination" page-number='vm.pageNumber' page-count="vm.pageCount" total-records="vm.totalRecords" api-url="duplicate-student"></pagination>
                            </td>
                        </tr>
                    </table>
            </div>
        </div>
    </div>
</div>

这是javascript代码

(function() 
    angular
        .module('vidyartha-coordinator')
        .controller('StudentDuplicateAccountController', StudentDuplicateAccountController);

    StudentDuplicateAccountController.$inject = ['$scope', 'ApiService', '$routeParams', '$http', '$location', '$timeout'];

    function StudentDuplicateAccountController($scope, ApiService, $routeParams, $http, $location, $timeout) 
        var vm = this;
        //console.log($routeParams)
        var page = $routeParams.page || 1;
        // vm.data = [];
        ApiService.getAll('student-duplicate-account?pageCount=5&pageNumber=' + page).then(function(response) 
            //console.log("response::"+JSON.stringify(response));
            vm.data = response.data.records;
            vm.pageNumber = response.data.pageNumber;
            vm.totalRecords = response.data.totalRecords;
            vm.pageCount = response.data.pageCount;
            $scope.renderpagination = true;
        );

        $("#slctAllDuplicateStd").click(function () 
            $(".duplicateRow").prop('checked', $(this).prop('checked'));
            // console.log('data:::'+JSON.stringify(data));

        );

        vm.process = function() 
          vm.duplicateArray = [];
          angular.forEach(vm.data, function(data)
            if (data.selected) 
              console.log("true")
              vm.duplicateArray.push(data.tenantId);
              vm.duplicateArray.push(data.mobileNumber);
              vm.duplicateArray.push(data.schoolId);
              vm.duplicateArray.push(data.classId);
            
          );

          console.log(vm.duplicateArray)

        
    

)();

我需要一次检查所有数据并按下处理按钮。 所以请告诉我应该在哪里添加一些条件。

【问题讨论】：

对其余数据使用隐藏的输入字段

对于其余数据，如data.mobileNumber,data.schoolId 等，在您传递复选框时作为输入类型隐藏

当您按下处理按钮时，使用console.log(vm.duplicateArray) 的输出更新您的问题。

【参考方案1】：

我不确定你为什么在这里混合 jquery，你可以按照以下方式进行

vm.selectAll =function()
angular.forEach(vm.data, function(data)

            data.selected=true;

然后在您的复选框中

 <th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>