javascript - AngularJS分页表:视图中的limitTo参数不更新
问题描述
我在 AngularJS 中的 Bootstrap 3 表中显示 JSON。
limitTo
在过滤器的帮助下,我正在对表格进行分页:
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", function($scope, $http) {
var url = root + "/users"
$http.get(url)
.then(function(data) {
// Users arary
$scope.users = data.data;
// Order by function
$scope.orderByMe = function(criteria) {
$scope.myOrderBy = criteria;
}
// Paginate
$scope.pageNum = 1;
$scope.perPage = 5;
$scope.startAt = 0;
$scope.prevPage = function() {
if ($scope.pageNum > 1) {
$scope.pageNum = $scope.pageNum - 1;
$scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
}
};
$scope.nextPage = function() {
$scope.pageNum = $scope.pageNum + 1;
$scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
};
});
}]);
body {
padding-top: 70px;
}
.container {
padding: 0 10px;
}
.search-box {
margin: 5px;
}
.panel-heading {
font-weight: bold;
}
.table-container {
margin: 10px 0;
}
.table-container .panel-body {
padding: 0;
}
.table-container table {
margin-bottom: 0;
border-width: 0;
border-top-width: 1px;
border-bottom-width: 1px;
}
.table-container table tr:last-child td {
border-bottom: none;
}
.table-container table tr th {
font-weight: bold;
cursor: pointer;
}
.table-container table tr th:first-child {
border-left: none;
}
.table-container table tr td:first-child {
border-left: none;
}
.table-container table tr th:last-child, .table-container table tr td:last-child {
border-right: none;
}
/* Media queries */
@media (min-width: 768px) {
.container {
width: auto;
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My App</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Users</a></li>
<li><a href="#">Posts</a></li>
</ul>
</div>
</nav>
<div class="container" data-ng-app="usersApp">
<div class="panel panel-default table-container">
<div class="panel-heading">Users</div>
<div class="panel-body" data-ng-controller="usersCtrl">
<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">
</div>
</div>
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="dataTable">
<thead>
<tr>
<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 users|filter:search|orderBy:myOrderBy| limitTo : perPage : startAt">
<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>
<p class="text-center">Page {{pageNum}}</p>
<p class="text-center">Show users from {{startAt + 1}} to {{startAt + perPage}}</p>
<div class="text-center">
<ul class="pager">
<li><a href="#" ng-click="prevPage()">← Previous</a></li>
<li><a href="#" ng-click="nextPage()">Next →</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
单击Next和Prev按钮后,视图中的startAt
参数limitTo
会更新,如表格下方的段落所示,但data-ng-repeat
不会(重新)使用它更新。
如何在每次更新时呈现表格startAt
?我的脚本中缺少什么?
解决方案
使用“现代”版本的 AngularJS 完成了这项工作:
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", function($scope, $http) {
var url = root + "/users"
$http.get(url)
.then(function(data) {
// Users arary
$scope.users = data.data;
// Order by function
$scope.orderByMe = function(criteria) {
$scope.myOrderBy = criteria;
}
// Paginate
$scope.pageNum = 1;
$scope.perPage = 5;
$scope.startAt = 0;
$scope.usersCount= $scope.users.length;
$scope.pageMax = Math.ceil($scope.usersCount/$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;
}
};
});
}]);
body {
padding-top: 70px;
}
.container {
padding: 0 10px;
}
.search-box {
margin: 5px !important;
}
.panel-heading {
font-weight: bold;
}
.table-container {
margin: 10px 0;
}
.table-container .panel-body {
padding: 0;
}
.table-container .table-responsive {
margin: 0 0 10px 0;
}
.table-container table {
border-width: 0;
border-top-width: 1px;
border-bottom-width: 1px;
margin-bottom: 0;
}
.table-container p {
margin-bottom: 0;
}
.table-container .pager {
margin: 5px 0 10px 0;
}
.table-container table tr:last-child td {
border-bottom: none;
}
.table-container table tr th {
font-weight: bold;
cursor: pointer;
}
.table-container table tr th:first-child {
border-left: none;
}
.table-container table tr td:first-child {
border-left: none;
}
.table-container table tr th:last-child, .table-container table tr td:last-child {
border-right: none;
}
/* Media queries */
@media (min-width: 768px) {
.container {
width: auto;
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My App</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Users</a></li>
<li><a href="#">Posts</a></li>
</ul>
</div>
</nav>
<div class="container" data-ng-app="usersApp">
<div class="panel panel-default table-container">
<div class="panel-heading">Users</div>
<div class="panel-body" data-ng-controller="usersCtrl">
<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">
</div>
</div>
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="dataTable">
<thead>
<tr>
<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 users|filter:search|orderBy:myOrderBy| limitTo : perPage : startAt">
<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>
<p class="text-center">Show users {{startAt + 1}} to {{startAt + perPage}} of {{usersCount}} users </p>
<div class="text-center">
<ul class="pager">
<li><a href="#" ng-click="prevPage()">← Previous</a></li>
<li><a href="#" ng-click="nextPage()">Next →</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- reporting-services - SSRS:百分比目标
- r - 从绘图对象中删除悬停信息文本
- linux - OpenModelica:没有输出变量或解决方案文件
- chart.js - chart.js 如何在 0/360 度不连续处绘制 xy 图
- c++ - C++:std::map、查找循环、算法
- javascript - 允许用户在 JavaScript 中更改背景颜色
- c - 使用结构来确定平面中的点 - C
- android - 带有圆角背景颜色的 Cardview
- sql - SQL 问题:在任何给定小时内出现的次数大于 N
- django - Django:仅在模板中呈现图像 url 的最后一部分