个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 01:18:36 26 4
gpt4 key购买 nike

我正在使用 angularjs 并将数据绑定(bind)到表，并使用 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>

最佳答案

通过使用分页，您可以有效地过滤表中的行，并且每次仅显示 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演示一种干净的方法

关于javascript - 如何使用 uib 分页检查和取消检查当前页面中的所有行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51870171/

26 4 0
文章推荐： javascript - 如何使用 Angular 和 NodeJS 将 csv 数据转储到 mongoDB
文章推荐： javascript - 删除列表项的选项
文章推荐： javascript - 在 HTML 中显示 base64 tiff 图像
文章推荐： javascript - Axios api 调用 - 加载失败，预检响应无效(重定向)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com