Question

我正在尝试使用AngularJS和MEAN Stack对我的blogroll进行分页。我有我的文章（博客文章）控制器设置，我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>

Answer 1

来自http://jsfiddle.net/2ZzZB/56/的

Pagination on a list using ng-repeat。您似乎缺少的主要方法是指示从哪里开始ng-repeat。我链接的小提琴通过创建startFrom过滤器来解决它。

分页AngularJS博客

1 个答案: