dirPagination 不起作用(Angular JS 分页) - IT屋-程序员软件开发技术分享社区
- 首页
- 其他开发
- dirPagination 不起作用(Angular JS 分页)
dirPagination 不起作用(Angular JS 分页)
[英] dirPagination does not work (Angular JS pagination)
本文介绍了dirPagination 不起作用(Angular JS 分页)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 dirPagination 但它没有工作.查看我的代码:http://plnkr.co/edit/18BxNhHRNyRoI17sBGQF?p=preview
我的代码:
<html ng-app="myApp"><头><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"></脚本><脚本>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 src="dirPagination.js"></script><身体><div ng-controller="PsCtrl">ItemCount: {{data.length}}<ul><li dir-paginate="item in data | itemsPerPage: 2">{{ item }}</li><dir-pagination-controls></dir-pagination-controls>
</html>我只得到这个作为输出:
ItemCount: 3⋅
但我希望底部有分页控件，并将此输出作为第一页:
ItemCount: 3⋅ {"a":1,"b":1}⋅ {"a":2,"b":2}
当我使用 <li ng-repeat="item in data">{{ item }}</li> 它显示正确的列表.
我做错了什么?
解决方案
运行 plnkr 所需的只是将 dirPaginate 包含到你的 angular 模块中:
var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination'])
并将dirpagination.js:155中分页HTML模板的路径更改为
templateUrl: 'dirPagination.tpl.html',
I am trying to use dirPagination but it does not work. See my code in action: http://plnkr.co/edit/18BxNhHRNyRoI17sBGQF?p=preview
My code:
<!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>
I only get this as output:
ItemCount: 3
⋅
But I would expect pagination controls at the bottom and this output as a first page:
ItemCount: 3
⋅ {"a":1,"b":1}
⋅ {"a":2,"b":2}
When I use <li ng-repeat="item in data">{{ item }}</li> it shows the correct list.
What am I doing wrong?
解决方案
All you need to run your plnkr is to include dirPaginate into your angular module:
var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination'])
And change path to pagination HTML template in dirpagination.js:155 to
templateUrl: 'dirPagination.tpl.html',
这篇关于dirPagination 不起作用(Angular JS 分页)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
