angularjs와 django-rest 페이지 매김

Question

나는 angularjs 앱을 장고 - 휴식과 잘 작동 시키지만 페이지 매김을 도입하여 문제를 쳤다.

{ 

    "count": 3, 
    "next": "/rest/image/?event_id=1&page=2", 
    "previous": null, 
    "results": 
    [ 

     { 
      "id": 13, 
      "title": "01-IMG_4953.JPG", 
     }, 
     { 
      "id": 14, 
      "title": "02-IMG_4975.JPG", 
     } 
    ] 

} 

: 나는

// restservices.js 
// API call for all images in an event 
services.factory('ImageEvent', function ($resource) { 
    return $resource(rest_api + '/rest/image/?event_id=:eventId&format=json', {}, { 
     query: { method:'GET', params:{eventId:''}, isArray:true} 
    }) 
}); 

// controllers.js 
// all Images in an event 
.controller('ImageEventCtrl', ['$scope', '$stateParams', 'ImageEvent', function($scope, $stateParams, ImageEvent) { 
    $scope.images = ImageEvent.query({eventId: $stateParams.eventId}, function(images) { 
    }); 
}]) 

내가 장고 - 나머지 끌 경우이 그것은 다음과 같은 JSON을 반환 매김 그러나 다음과 같은 JSON

[ 
    { 
     "id": 13, 
     "title": "01-IMG_4953.JPG", 
    }, 
    { 
     "id": 14, 
     "title": "02-IMG_4975.JPG", 
    }, 
    { 
     "id": 15, 
     "title": "03-IMG_4997.JPG", 
    } 
] 

을 돌려 아래로 당 restservice와 컨트롤러가

이 변경으로 인해 다음과 같은 콘솔 오류가 발생하고 모든 것이 작동하지 않습니다.

오류 : [$ resource : badcfg] 자원 구성에 오류가 있습니다. 배열을 포함하고 있지만 객체가 포함될 예상 응답

restArray : false로 변경하면 아무런 차이가 없습니다. 내 컨트롤러가 이것에 대처할 수 있도록 다시 쓰고 완벽한 세계에서 카운트, 다음 및 이전 링크를 노출 할 수 있습니까?

감사

Answer 1

각도-UI는 내가 전에 장고 나머지 프레임 워크와 함께 사용 한 페이지 매김 지시어가 있습니다.

http://angular-ui.github.io/bootstrap/#/pagination

는 아래의 다음과 같은 I 짓을 한 번에 항목의 X 양을로드합니다. 내가 장고 관리 기능을 재구성하기 위해 페이지 매김을 사용하고 있다는 점에 유의하십시오.

if request.GET.get('page'): 
    # Get the page number      
    page = request.GET.get('page') 

    # How many items per page to display     
    per_page = data['admin_attrs']['list_per_page']   


    begin = (int(page) - 1) * per_page      
    end = begin + per_page         

    objects = MODEL.objects.all()[begin:end]    

# Serializer for your corresponding itmes. This will grab the particular modelserializer               
serializer = serializer_classes[MODEL._meta.object_name]( 
    objects, fields=admin_attrs['list_display']    
)               


data['objects'] = serializer.data       
return Response(data)   

내 각 코드는 URL을 페이지를 추적하고 또한 버튼 기능을 다시 허용하고 또한 업데이트 : modelDetails 공장 가져

이 페이지 매김에서 올바른 페이지 번호와 URL을 생성

app.factory('modelDetails', function($http, $q){       
    data = {content: null}                           
    var dataFactory = {}             
    dataFactory.getObjects = function (app, model, page){     
     var deferred = $q.defer()           
     $http.get('api/admin/' + app + '/' + model + '/?page=' + page)  
      .success(function(result) {         
       deferred.resolve(result);         
      });               
     return deferred.promise           
    };                  

    return dataFactory              
});  



$scope.loadObjects = function() {               
    modelDetails.getObjects(app, model, $scope.currentPage)         
    .then(function (data){                 
     $scope.headers = data.headers;              
     $scope.admin_attrs = data.admin_attrs;            

     blank = new Array()                
     list_display = data.admin_attrs.list_display          

     $scope.objects = convertObjects(data.objects, list_display)       
     $scope.numPerPage = data.admin_attrs.list_per_page         
     $scope.currentPage = $stateParams.p             
     $scope.maxSize = 20;                
     $scope.bigTotalItems = data.object_count;           
     $scope.numPages = Math.ceil(data.object_count/    $scope.admin_attrs.list_per_page); 

    })                      
    .then(function (data) {                

     $scope.$watch('currentPage + numPerPage', function(oldVal, newVal) {    
      var begin = (($scope.currentPage - 1) * $scope.numPerPage)      
      , end = begin + $scope.numPerPage;            

      if(oldVal != newVal){               
       $location.search('p', $scope.currentPage)         
      }                    

      $rootScope.$on('$locationChangeSuccess', function(event) {      
       $scope.currentPage = $location.search().p         
        modelDetails.getObjects(app, model, $scope.currentPage)     
         .then(function (data) { 
          // convertObjects just reorders my data in a way I want           
          $scope.objects = convertObjects(data.objects, list_display)  
         });                 
      });                    
     });                     
    });                     
}