AngularJS 페이지 매기기 - 현재 페이지 가져 오기 및 컨트롤러로 전달

Question

서버 쪽 정렬 및 페이지 매김을 구현하고 있으며 사용자가있는 현재 페이지를 전달해야합니다. 그러면 정렬되어 첫 번째 페이지와 다른 페이지 페이지 (예 : 5 페이지의 "최소 득표 수"정렬은 5 페이지의 1 페이지에서 찾은 결과를 나타내지 않지만 5 페이지에있는 결과를 보여줍니다). 기본적으로, 나는 정렬을해야하지만 현재 페이지를 가져 오는 방법을 알아낼 수는 없습니다.

서버 측의 페이징이 문제없이 작동하고 있으며 여기에 간단한 내용이 누락되었다고 생각됩니다.

HTML (I이 사용자 정의 지시어 사용하고 있음을 유의하시기 바랍니다 : https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination) : 그래서

var currPage = $scope.currentPage; 

currPage

<tr dir-paginate="article in articles | itemsPerPage:articlesPerPage" total-items="totalArticles" current-page="currentPage"> 

<td> 
    <div class="col-md-1 voting well"> 
     <div class="votingButton" ng-click="upVote(articlevote);"> 
      <i class="glyphicon glyphicon-chevron-up"></i> 
     </div> 
     <div class="badge badge-inverse"> 
      <div>{{article.articlevotes}}</div> 
     </div> 
     <div class="votingButton" ng-click="downVote(articlevote);"> 
      <i class="glyphicon glyphicon-chevron-down"></i> 
     </div> 
    </div> 
</td> 
<td>{{article.articletitle}}</td> 
<td>{{article.articlecategoryid}}</td> 
<td><a ng-href="#article/{{article.id}}/{{article.articlelink}}">{{article.articletitle}}</a></td> 
</tr> 
       </table> 
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls> 

컨트롤러

$scope.articles = []; 
$scope.totalArticles = 0; 
$scope.articlesPerPage = 10; // this should match however many results your API puts on one page 
$scope.currentPage = 1; 


    // sort options 
$scope.sortoptions = [ 
{ 
    label: 'Most Votes', 
    value: 'articlevotes desc', 
}, 
{ 
    label: 'Least Votes', 
    value: 'articlevotes asc', 
} 
]; 

var sortBy = $scope.sortoptions[0].value; 
var currPage = $scope.currentPage; // Get current page 
console.log(currPage); 

// Initial page load 
getResultsPage(1, sortBy); 

$scope.update = function (articleSortOrder) { 
    // get value of sort and log it 
    console.log(articleSortOrder.value); 
    sortBy = articleSortOrder.value; 

    // log current page and pass as parameter 
    console.log(currPage); 
    getResultsPage(currPage, sortBy); // need to make dynamic so it gets current page 
} 

$scope.pageChanged = function (newPage) { 
    getResultsPage(newPage, sortBy); 
}; 

function getResultsPage(pageNumber, sortorder) { 

    // currently skipping by page number * articles per page 
    pfcArticles.query({ $skip: (pageNumber - 1) * $scope.articlesPerPage, $top: $scope.articlesPerPage, $orderby: sortorder, $inlinecount: 'allpages' }, function (data) { 
     $scope.articles = data.results; 
     $scope.totalArticles = data.count; // Can change to hard number to reduce total items instead of LimitTo 
    }); 
} 

Answer 1

문제는 당신이 할당된다는 점이다 컨트롤러가 인라인으로 설정되어 1으로 설정됩니다. tantiated, 그리고 결코 변경되지 않습니다. 따라서 컨트롤러에서 나중에 currPage을 참조하면 1으로 유지됩니다.

$scope.currentPage 값을 직접 참조해야합니다.이 값은 페이지 매김 지시문에 의해 업데이트됩니다.

그래서 여기에 "업데이트"방법을 변경해보십시오 :

$scope.update = function (articleSortOrder) { 
    sortBy = articleSortOrder.value; 
    getResultsPage($scope.currentPage, sortBy); 
} 

이 서비스에 올바른 현재 페이지 값을 전달해야한다.