Question

我正在使用angularjs并将数据绑定到表，并使用uib分页将分页添加到表中，在表中，我正在添加复选框以检查和取消选中行，这里是我单击“在标题，行中全部检查”时需要的应该只检查当前页面，但问题是它检查所有行，而与页面无关。

var myApp = angular.module('myApp', ['ui.bootstrap'])

  .controller('employeeController', function($scope) {

    var employees = [{
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    }, {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    }, {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    }, {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    }, {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    }, {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    }, {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    }, {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    }, {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    }, {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    }, {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }];
    $scope.employees = employees;

    $scope.showHideAddNotes = function(vendorsId, $index) {
      $scope.comments = vendorsId;
      angular.forEach($scope.employees, function(vendr) {
        if (vendr.VendID == $scope.comments) {
          $scope.showComment = true;
        }
      })
    }
    $scope.pageSize = 10;
    $scope.currentPage = 1;
    $scope.itemsPerPage = $scope.pageSize;
    $scope.maxSize = 5; //Number of pager buttons to show
    $scope.totalItems = $scope.employees.length;
    $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
    }

    //----------------------Check and Uncheck All Rows---------------

    $scope.CheckUncheckHeader = function() {
      $scope.IsAllChecked = true;
      for (var i = 0; i < $scope.employees.length; i++) {
        if (!$scope.employees[i].Selected) {
          $scope.IsAllChecked = false;
          break;
        }
      };
      var batchcount = 0;
      if ($scope.employees != undefined && $scope.employees.length > 0) {
        $scope.employees.forEach(function(pageitem) {
          if (pageitem.Selected)
            employees++;
        });
      }
      $scope.batchcount = batchcount;
    };
    $scope.CheckUncheckAll = function() { // Select and Unselect all Rows
      $scope.batchcount = 0;
      for (var i = 0; i < $scope.employees.length; i++) {
        $scope.employees[i].Selected = $scope.IsAllChecked;
      }
    };

  })

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<body ng-app="myApp">
  <div ng-controller="employeeController">
    <div class="container" style="margin-top:40px;">
      <div class="row">
        <div style="text-align: center">
          <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
        </div>
        <div class="col-md-12">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th>
                  <input id="Checkbox1" type="checkbox" ng-show="CheckAccess" ng-model="IsAllChecked" name="CheckboxGroup" ng-change="CheckUncheckAll()" /></th>
                <th>Name</th>
                <th>City</th>
                <th>Country</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
                <td>
                  <input id="Checkbox2" type="checkbox" ng-show="CheckAccess" ng-change="CheckUncheckHeader(emp)" name="checkname" ng-model="emp.Selected" ng-checked="emp.Selected" ng-disabled="emp.isDisabled" />
                </td>
                <td>{{emp.Name}}<br>
                  <div>

                  </div>
                  <div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
                    <div style="margin-bottom:5px;">
                      <textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
                    </div>
                    <button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
                  </div>

                </td>
                <td>{{emp.City}}</td>
                <td>{{emp.Country}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div style="text-align: center">
          <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 1

通过使用分页，您可以有效地过滤表上的行，并且每次仅显示n条记录。因此，您需要确保仅从显示的行中进行选择（与gmail等相同）。您可以像这样从ngRepeat表达式中获取这些记录

ng-repeat="row in vm.filtered = (vm.allRecords | limitTo : vm.showingAmount: (vm.currentPage -1) * vm.showingAmount)"

vm.displayedRecords是limitTo过滤器适用的项目，而vm.filtered是n可见记录，您在将过滤器应用于数据和您需要选择这些

我已经制作了一个demo plunk来演示这样做的干净方法

如何使用uib分页检查和取消检查当前页面中的所有行？

1 个答案: