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

您可以使用{-3}} angular-ui-bootstrap而不是尝试自己构建它。

此处undefined错误的片段是因为加载$scope.consultants未定义且startForm过滤器将尝试在undefined上运行.splice方法。尝试初始化$scope.consultants = []，以便在加载应用时它是一个空数组。

ng-repeat不工作的分页显示未定义错误的片段

1 个答案: