Angularjs分頁不起作用

Question

您好我正在使用WebAPI在angularjs中開發網站。我正在展示汽車細節（圖片，型號名稱和價格）。我有三個下拉菜單。基於下拉選擇的值，我將綁定到div的值如下。

<pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination> 
     <div class="grid-container"> 
      <div class="grid" ng-repeat="car in carDetails.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage))"> 
       <img class="car" src="{{car.WebImageURL}}"> 
       <div class="car-name">{{car.make}}<span class="make">{{car.model}}</span></div> 
       <div class="car-des">lorem ipsum dolor sit amet,</div> 
       <div class="car-price">{{car.Price}} <span class="sar">{{car.style}}</span></div> 
      </div> 
      </div> 

下面是我的控制器代碼。

function getcadetails(baseurl) 
     { 
      debugger; 
      var arrallcarDetails = new Array(); 
       $http.get(baseurl).success(function (data) { 
        $.map(data.data, function (item) { 
        arrallcarDetails.push(item); 
        }); 
        $scope.carDetails = arrallcarDetails; 
        // paging $scope.viewby = 10; 
        $scope.totalItems = $scope.carDetails.length; 
        $scope.currentPage = 4; 
        $scope.itemsPerPage = $scope.viewby; 
        $scope.maxSize = 5; //Number of pager buttons to show 
        $scope.setPage = function (pageNo) { 
         $scope.currentPage = pageNo; 
        }; 
        $scope.pageChanged = function() { 
         console.log('Page changed to: ' + $scope.currentPage); 
        }; 
        $scope.setItemsPerPage = function (num) { 
         $scope.itemsPerPage = num; 
         $scope.currentPage = 1; //reset to first paghe 
        } 
      }).error(function (status) { 
      }); 
     } 

下面是樣本數據（僅1列）

{"ID":0,"VendorID":0,"make":"HONDA","model":"2012","style":"SEDAN","ODO":null,"VIN":null,"ModelYear":0,"Price":45,"InteriorColor":null,"ExteriorColor":null,"WebImageURL":"http://localhost:49518/App/WebImageURL/yaris.png","TabImageURL":null,"MobileImageURL":null,"IsActive":null,"IsLocked":null,"DateCreated":null,"DateModified":null,"makeID":0,"modelID":0,"styleID":0}, 

我的問題是arrallcarDetails將持有的所有數據，但在HTML頁面中沒有任何顯示。我可以知道我做錯了什麼嗎？我正在努力弄清楚這個錯誤。任何幫助，將不勝感激。謝謝。

Answer 1

我想你應該把它放在這裏

function getcadetails(baseurl) 
    { 
     debugger; 
     var arrallcarDetails = new Array(); 
      $http.get(baseurl).success(function (data) { 
       $.map(data.data, function (item) { 
       arrallcarDetails.push(item); 
       }); 
       $scope.carDetails = arrallcarDetails; 
       // paging $scope.viewby = 10; 
       $scope.totalItems = $scope.carDetails.length; 
       $scope.currentPage = 4; 
       $scope.itemsPerPage = $scope.viewby; 
       $scope.maxSize = 5; //Number of pager buttons to show 
       $scope.setPage = function (pageNo) { 
        $scope.currentPage = pageNo; 
       }; 
       $scope.pageChanged = function() { 
        console.log('Page changed to: ' + $scope.currentPage); 
       }; 
       $scope.setItemsPerPage = function (num) { 
        $scope.itemsPerPage = num; 
        $scope.currentPage = 1; //reset to first paghe 
       } 
       $scope.$apply(); // ------- here! 
     }).error(function (status) { 
     }); 
    }