dirPagination不工作(Angular JS分页)
dirPagination不工作(Angular JS分页)
提问于 2014-07-30 08:30:59
我正在尝试使用dirPagination，但它不起作用。查看我的实际代码：http://plnkr.co/edit/18BxNhHRNyRoI17sBGQF?p=preview
我的代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
var myApp = angular.module('myApp', [])
.controller('PsCtrl', ['$scope', function ($scope) {
$scope.data = [
{a:1, b:1},
{a:2, b:2},
{a:3, b:3}
];
}]);
</script>
<script src="dirPagination.js"></script>
</head>
<body>
<div ng-controller="PsCtrl">
ItemCount: {{data.length}}
<ul>
<li dir-paginate="item in data | itemsPerPage: 2">{{ item }}</li>
</ul>
<dir-pagination-controls></dir-pagination-controls>
</div>
</body>
</html>我只得到以下内容作为输出：
ItemCount: 3
⋅但我希望分页控件位于底部，并将此输出作为第一页：
ItemCount: 3
⋅ {"a":1,"b":1}
⋅ {"a":2,"b":2}当我使用<li ng-repeat="item in data">{{ item }}</li>时，它会显示正确的列表。
我做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-08-06 18:32:19
运行plnkr所需要的就是将dirPaginate包含到您的angular模块中：
var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination'])并将dirpagination.js:155中的分页HTML模板路径更改为
templateUrl: 'dirPagination.tpl.html',Stack Overflow用户
发布于 2015-12-21 15:29:28
- 从此处下载dirPagination.js。
- 现在将dirPagination.js包含到您的页面。
- 在您的模块中添加angularUtils.directives.dirPagination，如下所示的
var app = angular.module("myApp",['angularUtils.directives.dirPagination']);- 我们使用
dir-paginate指令进行分页，在trtag
中添加dir-paginate
<tr dir-paginate="event in events|orderBy:['id', 't']:true | itemsPerPage: 5">- 将给定代码添加到页面上的任何位置或您想要的任何位置。
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25027050
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号