为 AngularJS 博客分页答案

【问题标题】：Paginating an AngularJS blog为 AngularJS 博客分页
【发布时间】：2013-12-06 18:07:54
【问题描述】：

我正在尝试使用 AngularJS 和 MEAN Stack 对我的博客进行分页。我已经设置了我的文章（博客文章）控制器，并且我有 list.html 来显示所有内容。我可以让所有博客都显示，也可以让分页增加，但我不能让 blogroll 一次显示 5 个项目并随着分页增加。

angular.module('mean.articles')
.controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Global', 'Articles', function ($scope, $routeParams, $location, Global, Articles) {
    $scope.global = Global;        
    $scope.currentPage = 0;
    $scope.pageSize = 5;

     //I've my create, update and delete methods here.

    $scope.find = function() {
        Articles.query(function(articles) {
            $scope.articles = articles;
        });
    };

    $scope.numPages = function() {
        return Math.ceil($scope.Articles.length / $scope.pageSize);
    };

这是我的 list.html：

<div class="container" style="width:900px; margin:auto">

<div class="container" style="width:600px; float:left">

        <section data-ng-controller="ArticlesController" data-ng-init="find()"> 
            <ul class="articles unstyled" style="width:600px">
                <li data-ng-repeat="article in articles | filter:search | limitTo:pageSize">
                    <h2><a data-ng-href="#!/articles/{{article._id}}">{{article.title}}</a></h2>
                    <div>{{article.content}}</div>
                    <div>{{article.tags}}</div>
                    <h4><small>
                        <div class="well well-small text-center" style="width:300px">
                            <div style="margin:auto">
                                <span>{{article.created | date:'medium'}}</span> /
                                <span>{{article.user.name}}</span>
                            </div>
                        </div>
                    </small></h6>
                </li>
            </ul>
            <h1 data-ng-hide="!articles || articles.length">No articles yet. <br> Why don't you <a href="/#!/articles/create">Create One</a>?</h1>

            <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
                Previous
            </button>
                {{currentPage+1}}/{{numPages()}}
            <button ng-disabled="currentPage >= numPages()-1" ng-click="currentPage=currentPage+1">
                Next
            </button>
        </section>      
</div>

<div class="container" style="width:300px; float:left">
    <input type="text" ng-model="search" placeholder="Enter your search terms" />
</div>

【问题讨论】：

标签： javascript angularjs express pagination mean-stack

【解决方案1】：

http://jsfiddle.net/2ZzZB/56/ 来自Pagination on a list using ng-repeat。看起来您缺少的主要内容是一种指示从哪里开始ng-repeat 的方法。我链接的小提琴通过创建startFrom 过滤器来解决它。

【讨论】：