AngularJS 카운터를 기반으로 두 가지 유형의 클릭 수행

Question

나는 503 개 이상의 레코드가 포함 된 $scope 개체가 있습니다. 이 $scope의 첫 번째 5 개 레코드를 limitTo를 통해 표시하는 <div>이 있습니다.

각 클릭에 다음 5 개의 레코드가 표시되는 '더보기'버튼이 있습니다.

그러나 50 개의 레코드가 표시된 후에는 내 단추가 getMore()이라는 함수를 호출하고 싶습니다.이 단추는 자체적으로는 다른 50 개의 레코드를 가져옵니다.

HTML :

<div ng-repeat="data in myData | limitTo: Limit" > 
    {{ data.name }} 
</div> 


<button ng-click="Limit = Limit + 5"> 
    See More 
</button> 

<button ng-click="getMore()"> 
    See More 
</button> 

JS는 :

app.controller("MyCtrl", function($scope) { 

    $scope.Limit = 5; 

    $scope.getMore = function() { 
     // Call service to get more data 
    }; 

}); 

어떻게 2 개 버튼이 필요성을 제거 할 수 있습니까? 그러나 또한 getMore()의 호출에서 최대 50 개의 결과가 반환되었습니다 (예를 들어 34 개). 한번에 5 개를 표시합니까?

감사합니다.

Answer 1

무한 스크롤을 구현하려고합니다.

커피 스크립트 : JS 컴파일

angular.module('yourApp.controllers').controller 'InfiniteCtrl', 
['$resource', '$scope', 'DataResource', 
    ($resource, $scope, DataResource) -> 
    new class InfiniteCtrl 
     constructor:() -> 
     $scope.myData = [] 
     @counter = 0 
     @loadMore() 

     loadMore:() -> 
     @counter += 1 
     @DataResource.get({page:@counter}).$promise.then (data) -> 
      $scope.myData = $scope.jobs.concat(data) 
    ] 

:

다음은 백 엔드에 페이지 매김 지원을 의미 내 간단한 해결책 당신은 양을 제한하기 위해이 솔루션을 적용 할 수

angular.module('yourApp.controllers').controller('InfiniteCtrl', [ 
    '$resource', '$scope', 'DataResource', function($resource, $scope, DataResource) { 
    var InfiniteCtrl; 
    return new (InfiniteCtrl = (function() { 
     function InfiniteCtrl() { 
     $scope.myData = []; 
     this.counter = 0; 
     this.loadMore(); 
     } 

     InfiniteCtrl.prototype.loadMore = function() { 
     this.counter += 1; 
     return this.DataResource.get({ 
      page: this.counter 
     }).$promise.then(function(data) { 
      return $scope.myData = $scope.jobs.concat(data); 
     }); 
     }; 

     return InfiniteCtrl; 

    })()); 
    } 
]); 

표시하는 항목 중 나는 당신 증가 제한마다 asume

<button ng-click="ctrl.loadMore()">More!</button>