请使用firefox,chrome等最新浏览器浏览本站。

angular分页

js+jquery 阿豹 369次浏览 0个评论 扫描二维码

anuglar分页代码
本案例使用bootstrap+angular.js实现
首先引用bootstrap.js和angular.js

<link href=”http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css&#8221; rel=”stylesheet” />

<script type=”text/javascript” src=”http://cdn.staticfile.org/angular.js/1.2.1/angular.js”></script&gt;

javascript代码:

    var app = angular.module("yApp",[]);
    app.controller("Pages",function($scope){
        $scope.currentPage = 0;
        $scope.pageSize = 6;
        $scope.lists = [];
        for (var i = 0; i < 100; i++) {
            $scope.lists.push("这是列表的第" + i + "条");
        };
        //分页数量
        $scope.pageNum = function(){
            return Math.ceil(this.lists.length / this.pageSize);
        }
    });
    //过滤器
    app.filter("paging",function(){
       return function(input,start){
    	try{
             if(input.length == 0) return;
    	     return input.slice(start);
    	}catch(e){}

       };
    });

html代码:

    <div class="container">
    <ol class="list-group">
        <li class="list-group-item" ng-repeat="list in lists | paging:currentPage * pageSize | limitTo:pageSize">{{list}}</li>
    </ol>
    <div class="pagebar">
        <button class="btn btn-info" type="button" ng-disabled="currentPage == 0" ng-click="currentPage = currentPage - 1">上一页</button>
        <span>{{currentPage + 1}} / {{pageNum()}}</span>
</div>

AngularJS的过滤器需要返回一个函数,这个函数接收至少一个参数,它的第一个参数是需要过滤的值本身,如果是单个变量,那就是单个变量。如果是在ng-repeat指令中,它指的是整个数组,而不是数组的每一项。在这里,我们的offset是放在ng-repeat中使用的,因此它需要处理的input是整个数组。


转载请注明angular分页
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到