我有来自服务器的数据想要显示。这些数据正在被分页和排序。 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 分页的地方。我的问题是，考虑到我有从服务器返回的对象，然后对内容进行分页，如何进行实时过滤？
最佳答案
您可以创建一个分页过滤器，并将其与 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"
关于javascript - 在分页时对 angularjs 中的对象进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28113852/