演示

Question

我正在开发一个小型应用程序，该应用程序在 HTML5表中显示“用户” JSON。它使用Bootstrap 3和AngularJS。我想对这张桌子进行分页。

我没有使用ng-repeat遍历的数组。我有页数。

var root = 'https://jsonplaceholder.typicode.com';

    // Create an Angular module named "usersApp"
    var app = angular.module("usersApp", []);

    // Create controller for the "usersApp" module
    app.controller("usersCtrl", ["$scope", "$http", "$filter", function($scope, $http, $filter) {
      var url = root + "/users";
      $scope.userList = [];
      $scope.search = "";
      $scope.filterList = function() {
        $scope.userList = $filter('filter')($scope.users, $scope.search);
        $scope.itemsCount = $scope.userList.length;
        $scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
      };
      $http.get(url)
        .then(function(data) {
          // Users arary
          $scope.users = data.data;
          $scope.filterList();
          // Order by function
          $scope.orderByMe = function(criteria) {
            $scope.myOrderBy = criteria;
          }

          // Paginate
          $scope.pageNum = 1;
          $scope.perPage = 3;
          $scope.startAt = 0;
          $scope.filterList();
          
          $scope.currentPage = function() {
            $scope.startAt = $scope.index * $scope.perPage;
          };

          $scope.prevPage = function() {
            if ($scope.pageNum > 1) {
              $scope.pageNum = $scope.pageNum - 1;
              $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
            }
          };

          $scope.nextPage = function() {
            if ($scope.pageNum < $scope.pageMax) {
              $scope.pageNum = $scope.pageNum + 1;
              $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
            }
          };
        });
    }]);

.table-container {
  margin: 10px 0 0 0 !important;
}
.table-responsive {
  margin: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<div data-ng-app="usersApp">
  <div class="container" data-ng-controller="usersCtrl">
    <div class="panel panel-default table-container">
      <div class="panel-heading">Users</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group search-box">
              <input type="text" class="form-control" id="search"
                     placeholder="Search User" data-ng-model="search"
                     ng-change="filterList()">
            </div>
          </div>
          <div class="col-sm-12">
            <div class="table-responsive">
              <table class="table table-striped table-bordered" id="dataTable">
                <thead>
                  <tr>
                    <th>#</th>
                    <th ng-click="orderByMe('name')">Full name</th>
                    <th ng-click="orderByMe('email')">Email</th>
                    <th ng-click="orderByMe('city')">City</th>
                    <th>Street</th>
                    <th>Suite</th>
                    <th>Zipcode</th>
                  </tr>
                </thead>
                <tbody>
                  <tr data-ng-repeat="user in userList|orderBy:myOrderBy| limitTo : perPage : startAt">
                    <td>{{$index + startAt + 1}}</td>
                    <td>{{user.name}}</td>
                    <td><a href="mailto:{{user.email  | lowercase}}">{{user.email  | lowercase}}</a></td>
                    <td>{{user.address.city}}</td>
                    <td>{{user.address.street}}</td>
                    <td>{{user.address.suite}}</td>
                    <td>{{user.address.zipcode}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center" ng-if="pageMax > 1">
      <ul class="pagination pagination-sm">
        <li><a href="#" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></a></li>
        <li ng-repeat="n in [].constructor(pageMax) track by $index">
          <a href="#" ng-click="currentPage()">{{$index+1}}</a>
        </li>
        <li><a href="#" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></a></li>
      </ul>
    </div>
  </div>
</div>

每当我单击 Next 和 Previous page 分页项（人字形）时，脚本都可以正常工作，但是当我单击编号的分页项时，{{{1 }}变量不会更新，并且表行号为NaN。

我在做什么错了？

Answer 1

以currentPage作为参数调用$index函数：

  <ul class="pagination pagination-sm">
    <li><a href="#" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></a></li>
    <li ng-repeat="n in [].constructor(pageMax) track by $index">
      ̶<̶a̶ ̶h̶r̶e̶f̶=̶"̶#̶"̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶c̶u̶r̶r̶e̶n̶t̶P̶a̶g̶e̶(̶)̶"̶>̶{̶{̶$̶i̶n̶d̶e̶x̶+̶1̶}̶}̶<̶/̶a̶>̶
      <a href="#" ng-click="currentPage($index)">{{$index+1}}</a>
    </li>
    <li><a href="#" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></a></li>
  </ul>

之前

 $scope.currentPage = function() {
    $scope.startAt = $scope.index * $scope.perPage;
 };

之后

  $scope.currentPage = function(index) {
      $scope.pageNum = index+1;
      $scope.startAt = index * $scope.perPage;
  };

如何使用搜索过滤器更新分页？

  $scope.filterList = function() {
    var oldList = $scope.userList || [];
    $scope.userList = $filter('filter')($scope.users, $scope.search);
    if (oldList.length != $scope.userList.length) {
        $scope.pageNum = 1;
        $scope.startAt = 0;
    };
    $scope.itemsCount = $scope.userList.length;
    $scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
  };

演示

angular.module("usersApp", [])
.controller("usersCtrl", function($scope, $http, $filter) {
  var root = '//jsonplaceholder.typicode.com';
  var url = root + "/users";
  $scope.userList = [];
  $scope.search = "";

  $scope.filterList = function() {
    var oldList = $scope.userList || [];
    $scope.userList = $filter('filter')($scope.users, $scope.search);
    if (oldList.length != $scope.userList.length) {
        $scope.pageNum = 1;
        $scope.startAt = 0;
    };
    $scope.itemsCount = $scope.userList.length;
    $scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
  };

  // Order by function
  $scope.orderByMe = function(criteria) {
    $scope.myOrderBy = criteria;
  };

  $http.get(url)
    .then(function(response) {
      $scope.users = response.data;
      $scope.filterList();
      // Paginate
      $scope.pageNum = 1;
      $scope.perPage = 3;
      $scope.startAt = 0;
      $scope.filterList();
  });

  $scope.currentPage = function(index) {
    $scope.pageNum  = index+1;
    $scope.startAt = index * $scope.perPage;
  };

  $scope.prevPage = function() {
    if ($scope.pageNum > 1) {
      $scope.pageNum = $scope.pageNum - 1;
      $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
    }
  };
  $scope.nextPage = function() {
    if ($scope.pageNum < $scope.pageMax) {
      $scope.pageNum = $scope.pageNum + 1;
      $scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
    }
  };
});

.table-container {
  margin: 10px 0 0 0 !important;
}
.table-responsive {
  margin: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<div data-ng-app="usersApp">
  <div class="container" data-ng-controller="usersCtrl">
    <div class="panel panel-default table-container">
      <div class="panel-heading">Users</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group search-box">
              <input type="text" class="form-control" id="search" placeholder="Search User" data-ng-model="search" ng-change="filterList()">
            </div>
          </div>
          <div class="col-sm-12">
            <div class="table-responsive">
              <table class="table table-striped table-bordered" id="dataTable">
                <thead>
                  <tr>
                    <th>#</th>
                    <th ng-click="orderByMe('name')">Full name</th>
                    <th ng-click="orderByMe('email')">Email</th>
                    <th ng-click="orderByMe('city')">City</th>
                    <th>Street</th>
                    <th>Suite</th>
                    <th>Zipcode</th>
                  </tr>
                </thead>
                <tbody>
                  <tr data-ng-repeat="user in userList|orderBy:myOrderBy| limitTo : perPage : startAt">
                    <td>{{$index + startAt + 1}}</td>
                    <td>{{user.name}}</td>
                    <td><a href="mailto:{{user.email  | lowercase}}">{{user.email  | lowercase}}</a></td>
                    <td>{{user.address.city}}</td>
                    <td>{{user.address.street}}</td>
                    <td>{{user.address.suite}}</td>
                    <td>{{user.address.zipcode}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center" ng-if="pageMax > 1">
      <ul class="pagination pagination-sm">
        <li><a href="#" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></a></li>
        <li ng-repeat="n in [].constructor(pageMax) track by $index"><a href="#" ng-click="currentPage($index)">{{$index+1}}</a>
        </li>
        <li><a href="#" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></a></li>
      </ul>
    </div>
  </div>
</div>

AngularJS分页错误：无法捕获当前页面索引

1 个答案:

之后

演示