ng-repeat에 페이지 매김이 작동하지 않습니다. 정의되지 않은 오류가 표시됩니다.

Question

내 목록에 대한 ng-repeat 결과에 페이지 번호를 매기려고합니다. 시작 부분에 2 개의 결과 만 표시하고 다음 및 이전 버튼은 이 내 컨트롤러 코드

<script> 
    var app = angular.module('searchApp', []); 
    app.controller('searchCtrl', function ($scope, $http, $filter) { 
     console.log("got it"); 
     $http.post('/api/ConsultantApi/ConsultantSearch').success(function (data) { 
      console.log('Connected to the api'); 
      console.log(data);    
      $scope.consultants = data; 
      $scope.currentPage = 0; 
      $scope.pageSize = 2; 
      $scope.q = ''; 
      $scope.getData = function() { 
       return $filter('filter')($scope.consultants, $scope.q) 
      } 
      $scope.numberOfPages = function() { 
       return Math.ceil($scope.getData().length/$scope.pageSize); 
      } 
     }).error(function (data) { 
      console.log("No Data Found"); 
     }); 
     $http.post('/api/ServiceCategoryApi/GetAllServiceCategories').success(function (response) { 
      console.log("Service Category Connected"); 
      console.log(response); 
      $scope.serviceCategory = response; 
     }).error(function() { 
      console.log('Service Category Not Connected'); 
     }); 
     $http.post('/api/ServiceApi/GetAllServices').success(function (res) { 
      console.log("Service Connected"); 
      console.log(res); 
      $scope.service = res; 
     }).error(function() { 
      console.log('Service Not Connected'); 
     }); 
     $scope.ShowCategoryIds = function() { 
      console.log('function called'); 
      console.log($scope.ConsultantServices.Service.ServiceCategoryId); 
      console.log($scope.ConsultantServices.Service.ServiceId); 
     } 
    }); 
    //new script starts 
    app.filter('startFrom', function() { 
     return function (input, start) { 
      start = +start; //parse to int 
      return input.slice(start); 
     } 
    }); 
    //new script ends 
</script> 

및

<div class="row thumbnail" style="border:0px; margin-top:20px" ng-repeat="item in consultants | startFrom:currentPage*pageSize | limitTo:pageSize | filter:search"> 
      <div style="margin-top:10px;margin-left:0px"> 
       <div class="col-md-2"> 
        <div style="margin-top:0px;margin-bottom:10px"> 
         <div style="margin:5px"><img ng-src="{{item.ProfilePhotoUrl}}" class="img-responsive img-circle" /></div> 
         <div style="margin-top:10px;"> 
          <div ng-switch="{{item.AverageRating}}"> 
           <strong ng-switch-when="0"><img src="Images/RatingPage/StarRating/0Star.png" class="img-responsive" /></strong> 
           <!--<strong ng-switch-when="0.5"><img src="Images/RatingPage/StarRating/0.5Star.png" class="img-responsive" /></strong>--> 
           <strong ng-switch-when="1"><img src="Images/RatingPage/StarRating/1Star.png" class="img-responsive" /></strong> 
           <!--<strong ng-switch-when="1.5"><img src="Images/RatingPage/StarRating/1.5Star.png" class="img-responsive" /></strong>--> 
           <strong ng-switch-when="2"><img src="Images/RatingPage/StarRating/2Star.png" class="img-responsive" /></strong> 
           <!--<strong ng-switch-when="2.5"><img src="Images/RatingPage/StarRating/2.5Star.png" class="img-responsive" /></strong>--> 
           <strong ng-switch-when="3"><img src="Images/RatingPage/StarRating/3Star.png" class="img-responsive" /></strong> 
           <!--<strong ng-switch-when="3.5"><img src="Images/RatingPage/StarRating/3.5Star.png" class="img-responsive" /></strong>--> 
           <strong ng-switch-when="4"><img src="Images/RatingPage/StarRating/4Star.png" class="img-responsive" /></strong> 
           <!--<strong ng-switch-when="4.5"><img src="Images/RatingPage/StarRating/4.5Star.png" class="img-responsive" /></strong>--> 
           <strong ng-switch-when="5"><img src="Images/RatingPage/StarRating/5Star.png" class="img-responsive" /></strong> 
          </div> 
         </div> 
         <small style="color:#26506D"><strong><a href="#">View Consultants Rating</a></strong></small> 
        </div> 
       </div> 
       <div class="col-md-10"> 
        <div class="row"> 
         <div class="col-md-9"> 
          <h2 style="color:#26506D">{{item.ConsultantName}}</h2> 
         </div> 
         <div class="col-md-3"> 
          <h2 ng-if="item.Availability=='Yes'" style="color:green">Available</h2> 
          <h2 ng-if="item.Availability=='No'" style="color:red">Not Available</h2> 
         </div> 
        </div> 
        <h3 style="color:darkgray" ng-if="item.ConsultantCity != null && item.ConsultantState != null && item.ConsultantCountry != null">{{item.ConsultantCity}}, {{item.ConsultantState}}, {{item.ConsultantCountry}}.</h3> 
        <p>{{item.ProfileOverView | limitTo:400}}</p> 

        <ul class="list-inline"> 
         <li style="color:darkgray" ng-repeat="ServiceItem in item.ConsultantServices"><div style="margin:5px">{{ServiceItem.Service.ServiceName}}</div></li> 
        </ul> 
       </div> 
      </div>     
     </div> 
     <button class="btn btn-primary" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> 
      Previous 
     </button> 
     <!--{{currentPage+1}}/{{numberOfPages()}}--> 
     <button class="btn btn-primary" ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1"> 
      Next 
     </button> 

Answer 1

당신의 공동을 다음과 같이 매김이 사용하는 코드입니다

따라 작동 uld는 자체적으로 빌드하려고 시도하는 것보다 각도 Ui 부트 스트랩을 Pagination Directive 사용하십시오.

여기서 undefined 슬라이스의 오류는로드시 $scope.consultants이 정의되지 않았고 startForm 필터가 정의되지 않은 경우 .splice 메서드를 실행하려고 시도하기 때문에 발생합니다. $scope.consultants = []을 초기화 해보세요. 앱이로드 될 때 빈 배열입니다.