javascript - 在分页时对 angularjs 中的对象进行排序

Question

我有来自服务器的数据想要显示。这些数据正在被分页和排序。 Controller 相关部分如下:

appControllers.controller('PostsCtrl',
    ['$scope', 'Restangular', 'messageCenterService',
        '$location', '$anchorScroll',
        '$filter',
    function ($scope, Restangular, messageCenterService,
    $location, $anchorScroll, $filter) {


        // Get all posts from server.
        var allPosts = Restangular.all('api/posts');


        allPosts.getList().then(function (posts) {
            $scope.posts = posts;
            $scope.predicate = 'rank';
            $scope.reverse = false;
            $scope.itemsPerPage = 10;
            $scope.currentPage = 1;
            $scope.totalItems = $scope.posts.length;
            $scope.pageCount = function () {
                return Math.ceil($scope.totalItems / $scope.itemsPerPage);
            };
            $scope.$watch('currentPage + itemsPerPage',
                function () {
                    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                end = begin + $scope.itemsPerPage;
            $scope.position = (10 * ($scope.currentPage - 1));
            $scope.filteredPosts = $scope.posts.slice(begin, end);
            $location.hash('top');

            // call $anchorScroll()
            $anchorScroll();
                });
        });

这是 html:

<li class="list-group-item" ng-repeat="post in filteredPosts  | orderBy:predicate:reverse">

            <div class="row-fluid">
                <div class="col-sm-1 ">
                    <p style="margin-top: 1em">{{($index + 1) + position}}.</p>
                </div>
                <div class="col-sm-1 v-center">
                    <a href="#" ng-click="voteUp(post)"> <i class="fa fa-angle-up"></i></a> <br />
                    <small>{{post.votes}}votes</small> <br />
                    <a href="#" ng-click="voteDown(post)"> <i class="fa fa-angle-down"></i></a>
                </div>  
                <div class="col-sm-8">
                    <h4><a href={{post.url}}>{{post.title}}</a></h4>
                    <div>
                        <ul class="list-inline">
                            <li ng-repeat="tag in post.tags">
                            <span class="fa fa-tag"></span>
                            <button ng-click="getTags(tag.id)">{{tag.name}}</button>
                            </li>
                        </ul>
                        <div>
                            <em>{{ post.created_at | timeAgo}}</em> 
                            by <cite>{{post.author.username}}</cite> 

                        </div>
                        <div>
                            <a href ng-click="select(post)">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-comment fa-stack-2x"></i>
                                    <strong class="fa-stack-1x fa-stack-text fa-inverse">
                                        {{post.comments.length}}
                                    </strong>
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="panel" ng-show="isSelected(post)">
                        <ul class="nav nav-list" ng-repeat="comment in post.comments">
                            <li class="list-group-item">
                            <strong><cite>{{comment.author.username}}</cite></strong> 
                            {{comment.updated_at | timeAgo }}
                            <p>{{comment.message}}</p>
                            </li>
                        </ul>
                        <form name="CommentForm" novalidate role="form" ng-if="user.isLoggedIn" ng-submit="CommentForm.$valid && comment(post)">
                            <label for="InputComment">Add a Comment</label>
                            <textarea ng-model="newComment.message" class="form-control" id="InputComment" rows="3" required></textarea>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>       
                </li>
                <pagination total-items="totalItems" items-per-page="itemsPerPage" 
                ng-model="currentPage" ng-change="pageChanged()"></pagination>

我需要一些帮助来弄清楚如何过滤数据在页面上的显示顺序。我读过其他有关排序的问题，但我没有看到任何内容也用 angularjs 分页的地方。我的问题是，考虑到我有从服务器返回的对象，然后对内容进行分页，如何进行实时过滤？

Answer 1

您可以创建一个分页过滤器，并将其与 orderBy 组合来模拟 filteredPosts。

app.filter('page', function () {
    return function (input, start, end) {
        return input.slice(start, end);
    };
});

然后您可以在模板中应用这两个过滤器。

ng-repeat="post in posts | orderBy:predicate:reverse | page:begin:end"