选择每页每页中存在的所有列

Question

此JS文件包含控制器，该控制器包含设置分页和逻辑的逻辑，用于单选和多选复选框。 当我点击选择全部时，它会选择所有可能的记录，而不管当时表格中有多少记录。例如，如果分页每页显示10条记录而用户点击全部选择，那么用户应该只选择所有可能记录中的10条记录。

angular.module('ControllerModule', [])
    .controller('BundleCtrl',['$scope','BundleService',function($scope, BundleService){
        console.log("Inside Controller 1");

        $scope.ordered_columns = [];
        $scope.allItemsSelected = false;

        $scope.viewby = 10;
        $scope.totalItems = $scope.bundles.length;
        $scope.currentPage = 1;
        $scope.itemsPerPage = $scope.viewby;
        $scope.maxSize = 5; //Number of pager buttons to show

        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };

        $scope.pageChanged = function() {
            console.log('Page changed to: ' + $scope.currentPage);
        };

        $scope.setItemsPerPage = function(num) {
            $scope.itemsPerPage = num;
            $scope.currentPage = 1; //reset to first page
        }

        $scope.selectEntity = function () {
            // If any entity is not checked, then uncheck the "allItemsSelected" checkbox
            for (var i = 0; i < $scope.bundles.length(); i++) {
                if (!$scope.bundles[i].isChecked) {
                    $scope.allItemsSelected = false;
                    return;
                }
            }

            //If not the check the "allItemsSelected" checkbox
            alert("after loop");
            $scope.allItemsSelected = true;

        };

        $scope.selectAll = function () {
            // Loop through all the entities and set their isChecked property
            for (var i = 0; i < $scope.bundles.length; i++) {
                $scope.bundles[i].isChecked = $scope.allItemsSelected;
            }
        };

        }]);

HTML

<!-- HTML code for the table which has all the columns with the select boxes-->

<div class="row">
  <input id="search" name="q" type="text" size="40" ng-model="search" placeholder="Search (by bundlename, RAG, ID)">
  <div class="container-fluid">
    <table class="table table-bordered table-striped" style="margin-top:5px">
      <thead>
        <tr>
          <label>
            <th>
              <input type="checkbox" ng-model="allItemsSelected" ng-change="selectAll()">Select All
            </th>
          </label>
          <th>{{ all_columns[0]}}&nbsp<span ng-if="!custom" ng-click="dataSort('RAGStatus')"><img class="img"
                                                                                                                        ng-src="resources/images/down-black-arrow.png"> </span>

            <span ng-show="custom" ng-click="dataSort('RAGStatus')"><img class="img" ng-src="resources/images/up-black-arrow.png">
                        </span>
          </th>
          <th>{{ all_columns[1]}}&nbsp<span ng-if="!custom" ng-click="dataSort('Status')"><img class="img"
                                                                                                                         ng-src="resources/images/down-black-arrow.png"> </span>

            <span ng-show="custom" ng-click="dataSort('Status')"><img class="img" ng-src="resources/images/up-black-arrow.png">
                        </span>
          </th>
          <th>{{ all_columns[2]}}&nbsp<span ng-if="!custom" ng-click="dataSort('BundleID')"><img
                                                    class="img" ng-src="resources/images/down-black-arrow.png"> </span>

            <span ng-show="custom" ng-click="dataSort('BundleID')"><img class="img" ng-src="resources/images/up-black-arrow.png">
                        </span>
          </th>
          <th>{{ all_columns[3]}}&nbsp <span ng-if="!custom" ng-click="dataSort('BundleName')"><img
                                                    class="img" ng-src="resources/images/down-black-arrow.png"> </span>

            <span ng-show="custom" ng-click="dataSort('BundleName')"><img class="img" ng-src="resources/images/up-black-arrow.png">
                        </span>
          </th>

          <th>{{ all_columns[4]}}&nbsp<span ng-if="!custom" ng-click="dataSort('ofOrders')"><img
                                            class="img" ng-src="resources/images/down-black-arrow.png"> </span>

            <span ng-show="custom" ng-click="dataSort('ofOrders')"><img class="img"
                                                                                          ng-src="resources/images/up-black-arrow.png">
                        </span>
          </th>

          <th>{{ all_columns[5]}}&nbsp<span ng-if="!custom" ng-click="dataSort('ofClosedOrders')"><img
                                                    class="img" ng-src="resources/images/down-black-arrow.png"> </span>

            <span ng-show="custom" ng-click="dataSort('ofClosedOrders')"><img class="img"
                                                                                      ng-src="resources/images/up-black-arrow.png">
                        </span>
          </th>
          <th>{{ all_columns[6]}}&nbsp <span ng-if="!custom" ng-click="dataSort('Actions')"><img
                                                    class="img" ng-src="resources/images/down-black-arrow.png"> </span>

            <span ng-show="custom" ng-click="dataSort('Actions')"><img class="img" ng-src="resources/images/up-black-arrow.png">
                        </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="entity in bundles.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage)) | filter : search |orderBy:predicate:reverse" ng-class="{selected: bundles.isChecked}">
          <td>
            <input type="checkbox" ng-model="bundles[$index].isChecked" ng-change="selectEntity()">
          </td>
          <td ng-class="entity.RAGStatus"></td>
          <td>{{entity.Status}}</td>
          <td>{{entity.BundleID}}</td>
          <td><a href="#!">{{entity.BundleName}}</a>
          </td>
          <td>{{entity.ofOrders}}</td>
          <td>{{entity.ofClosedOrders}}</td>
          <td>
            <div class="btn btn-default follow following"><span>{{entity.Actions}}</span>
            </div>
            <span class="glyphicon glyphicon-bell"></span>
          </td>

        </tr>
      </tbody>
    </table>
    <span>View
                            <select name="singleSelect" id="viewPage" ng-model="viewby"
                                    ng-change="setItemsPerPage(viewby)" ng-options="item for item in options1 track by item">
                            </select> records per page.

                            <a href="#module2">
                                <button>New</button>
                            </a>

                            </span>
  </div>

</div>

<!-- the code ends here which was my html code -->

图像包含所有选择框的表格视图