Angularjs分页不工作

Angularjs分页不工作,angularjs,Angularjs,嗨,我正在用WebAPI开发angularjs网站。我正在展示汽车的详细信息(包括图像、型号名称和价格)。我有三个下拉列表。根据下拉选择的值,我将值绑定到div,如下所示 <pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"><

嗨,我正在用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>
下面是示例数据(仅1行)


我的问题是ArrallCardDetails将保存所有数据,但在html页面中没有显示任何内容。我能知道我做错了什么吗?我正在努力想办法弄清楚这个错误。任何帮助都将不胜感激。谢谢。

我想你应该把它放在这里

  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) {
         });
    }

可能您忘记了
$scope.$apply
在您的
.success(..)
函数中。谢谢。我从ng repeat中删除了切片(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage)),并在不分页的情况下工作。我有什么遗漏吗?嗨,我想我应该在哪里应用$scope.$apply?谢谢。我提出了这个问题,但最后得到了[$rootScope:inprog]$digest已经在进行中了。这很奇怪,您能提供JSFIDLE或plunkr示例吗?谢谢。我在这里更新了我的plunker。不是从我硬编码的服务器调用数据。好的,您的plunkr不工作,我可以理解$http或其他依赖项的问题,但我甚至无法从服务器找到您的硬编码数据。因此,您能否修复plunkr示例,请为不便之处道歉。我编辑了普朗克。在$scope.cardetals中,我有硬编码数据。
{"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},
  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) {
         });
    }