Question

您好，我正试图在我点击时获取所有数据 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)

        }
    }

})();

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

Answer 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>

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

1 个答案: