Javascript 分页时对angularjs中的对象进行排序

我想显示来自服务器的数据。此数据正在分页并进行排序。控制器的相关部分如下所示：

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>

{{（$index+1）+position}


{post.voces}}投票数



{{tag.name}


{{post.created_at | timeAgo}}
通过{post.author.username}


{{comment.author.username}}
{{comment.updated_at|timeAgo}
{{comment.message}}



添加评论
提交

---

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

您可以创建一个分页筛选器，并将其与

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"

---

还可以通过编程方式使用orderBy筛选器对数组进行排序

$scope.posts = posts;
$scope.posts=$filter('orderBy')($scope.posts,'rank',false ); 
$scope.itemsPerPage = 10; 
...

---

$filter u已作为控制器中的依赖项

感谢您的回答，这正是我所需要的。我现在收到一个错误：[$injector:unpr]未知提供程序：inputProvider我已更新了答案。我忘了功能的级别。这就是我没有测试它所得到的。我尝试过，但我想让用户点击一个按钮，然后重新安排订单，我想不出如何使用$filter服务，而不改变cource的状态，使用@Chris Bouchard aswer中的过滤器。不知道他已经提供了如何编写过滤器