2015-01-23 2 views
1

표시 할 서버에서 오는 데이터가 있습니다. 이 데이터는 페이지가 매겨지고 정렬됩니다. 나는 데이터가 페이지에 표시되는 순서를 필터링하는 방법을 알아내는 몇 가지 도움이 필요페이지 매김 중에 angularjs에서 개체 정렬

<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> 

: 여기

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입니다 다음과 같이 컨트롤러의 관련 부분입니다 . 나는 정렬에 관해 묻는 다른 질문을 읽었으나 내용이 어디에 있는지도 알지 못했다. 내가 갖고있는 질문은 서버에서 객체가 돌아와서 내용이 페이지 매김된다는 사실을 고려하여 라이브 필터를 수행하는 방법입니다.

답변

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" 
+0

덕분에이 답변에 대한 컨트롤러의 종속성으로 이미

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

$ 필터를 정렬도 프로그래밍 해 orderBy 필터를 사용할 수 있습니다, 이것은 내가 필요한 것입니다 . 오류가 발생했습니다 : [$ injector : unpr] 알 수없는 공급자 : inputProvider <- input <- pageFilter –

+0

답변을 업데이트했습니다. 나는 수준 높은 기능을 잊어 버렸다. 그게 내가 그것을 테스트하지 못한 것에 대한 것입니다. –

0

당신은 당신의 배열 u는

+0

나는 그것을 시도했지만 사용자가 버튼을 클릭하여 순서를 재 배열하고 상태를 변경하지 않고 $ 필터 서비스를 사용하는 방법을 파악할 수 없었습니다. –

+0

@Chris와 같은 필터를 사용하는 것보다 Bouchard aswer. 그는 필터 작성 방법을 이미 제공하고 있지 않습니다. – micha