Fatal编程技术网
  • javascript/
  • Javascript 如何使用AngularJS解决分页错误？

Javascript 如何使用AngularJS解决分页错误？

javascript angularjs

Javascript 如何使用AngularJS解决分页错误？,javascript,angularjs,Javascript,Angularjs,我正在使用AngularJS，下面是我的代码： 控制器 $scope.totalItems = $scope.lists.length; $scope.currentPage = 1; $scope.numPerPage = 8; $scope.paginate = function (value) { var begin, end, index; begin = ($scope.currentPage - 1) * $scope.numPerPage; end = b

我正在使用AngularJS，下面是我的代码：

控制器

$scope.totalItems = $scope.lists.length;
$scope.currentPage = 1;
$scope.numPerPage = 8;

$scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.lists.indexOf(value);
    return (begin <= index && index < end);
}

$scope.totalItems=$scope.lists.length；
$scope.currentPage=1；
$scope.numPerPage=8；
$scope.paginate=函数（值）{
var开始、结束、指数；
begin=（$scope.currentPage-1）*$scope.numPerPage；
end=begin+$scope.numPerPage；
index=$scope.lists.indexOf（值）；
返回（开始上的快速示例。查看页面并构建要显示的数组


var app = angular.module('pagination', ['ui.bootstrap']);

app.controller('Example', function($scope){
  $scope.lists = [
    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,15
  ];
  $scope.totalItems = $scope.lists.length;
  $scope.currentPage = 1;
  $scope.numPerPage = 8;
  $scope.theActualDisplayList = [];

  $scope.$watch('currentPage', function(page) {
    if($scope.currentPage) {
      var spliceFrom = ($scope.currentPage - 1) * $scope.numPerPage; 
      var offset = spliceFrom + $scope.numPerPage;
      $scope.theActualDisplayList = [];
      for (var i = spliceFrom; i < offset; i++) {
        if(i === $scope.lists.length) return false;
        $scope.theActualDisplayList.push($scope.lists[i]);
      }
    }
  });

});


<body ng-app="pagination" ng-controller="Example">
    <h1>Pagination.</h1>
    <ul><li ng-repeat="i in theActualDisplayList track by $index">{{i}}</li></ul>
    <pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm"></pagination>
  </body>



var-app=angular.module（'pagination'，['ui.bootstrap']）；
app.controller（'示例'，函数（$scope）{
$scope.lists=[
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,15
];
$scope.totalItems=$scope.lists.length；
$scope.currentPage=1；
$scope.numPerPage=8；
$scope.theActualDisplayList=[]；
$scope.$watch（'currentPage'，函数（第页）{
如果（$scope.currentPage）{
var-spliceFrom=（$scope.currentPage-1）*$scope.numPerPage；
var offset=从+scope.numPerPage拼接；
$scope.theActualDisplayList=[]；
对于（var i=从；i<偏移；i++）{
if（i==$scope.lists.length）返回false；
$scope.theActualDisplayList.push（$scope.lists[i]）；
}
}
});
});
标页码

  • {{i}}



这里我做了一个plnkr，在我遇到使用angularjs动态分页的问题后，这里我想你得到了所有的修复。有关详细信息，你可以阅读我写的一篇文章
希望你能得到帮助。
这里是分页初始化，如果我们在$scope.Items中装箱了项列表


$scope.currentPage = 1; //current page
    $scope.entryLimit = 5; //max no of items to display in a page
    $scope.filteredItems = $scope.Items.length; //Initially for no filter
    $scope.totalItems = $scope.filteredItems;
    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function () {
        $timeout(function () {
            $scope.filteredItems = $scope.filtered.length;
        }, 9000);
    };
    $scope.sort_by = function (predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };


迭代表行中的列表项，如下所示


<tr ng-repeat="data in filtered = (Items  | filter:{'Name':SearchText}:false |
 filter:{'CountryId':  CountryId || undefined}:true |orderBy : predicate
:reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
       <td><b>{{data.Name }} </b></td>
                                            <td>
                                                <b>
                                                    {{data.CountryId == "1" ? 'Bangladesh' : ''}}
                                                    {{data.CountryId == "2" ? 'India' : ''}}
                                                    {{data.CountryId == "3" ? 'Pakistan' : ''}}
                                                    {{data.CountryId == "4" ? 'Vutan' : ''}}
                                                    {{data.CountryId == "5" ? 'Nepal' : ''}}
                                                </b>
                                            </td>
                                        </tr>




{{data.Name}
{{data.CountryId==“1”？“孟加拉国”：“}”
{{data.CountryId==“2”？“印度”：“}”
{{data.CountryId==“3”？“巴基斯坦”：“}”
{{data.CountryId==“4”？“Vutan”：“”}
{{data.CountryId==“5”？“尼泊尔”：“”}

在何处使用$scope.paginate函数？@arman1991我是angular的新手，我不认为我理解你的问题，我不知道你在何处调用$scope.paginate函数，无论是在controller还是HTML中。你只初始化函数，你不调用它，因为它初始化了对分页很重要的属性。@arman1991检查我的设置更新代码行我刚刚添加了这一行，它确实显示了这些数字，但问题是它不显示数据分页指令不显示数据，只是分页控件，您需要添加一个列表（或其他东西）来显示它，使用绑定的数据作为过滤器。

$scope.currentPage = 1; //current page
    $scope.entryLimit = 5; //max no of items to display in a page
    $scope.filteredItems = $scope.Items.length; //Initially for no filter
    $scope.totalItems = $scope.filteredItems;
    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function () {
        $timeout(function () {
            $scope.filteredItems = $scope.filtered.length;
        }, 9000);
    };
    $scope.sort_by = function (predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };



<tr ng-repeat="data in filtered = (Items  | filter:{'Name':SearchText}:false |
 filter:{'CountryId':  CountryId || undefined}:true |orderBy : predicate
:reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
       <td><b>{{data.Name }} </b></td>
                                            <td>
                                                <b>
                                                    {{data.CountryId == "1" ? 'Bangladesh' : ''}}
                                                    {{data.CountryId == "2" ? 'India' : ''}}
                                                    {{data.CountryId == "3" ? 'Pakistan' : ''}}
                                                    {{data.CountryId == "4" ? 'Vutan' : ''}}
                                                    {{data.CountryId == "5" ? 'Nepal' : ''}}
                                                </b>
                                            </td>
                                        </tr>