Question

我正在为我的应用程序使用Angularjs。我在使用分页选项时遇到问题。我使用dir-paginate选项来创建分页。

这是我的HTML

    <tr data-dir-paginate="college in colleges | itemsPerPage: 10"
    data-current-page="currentPage"> 
    <td>{{$index + 1}}</td>
    <td><a href="#!/collegedetails/{{college.collegeId}}">
    {{college.name}}</a></td>
    <td>{{college.typeName}}</td>
    </tr>

这是我的Controller.js

    var Controller = function($scope, $rootScope)
    {
    var app = angular.module('adminApp',
    ['angularUtils.directives.dirPagination']);
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;
    $scope.getAllColleges = function()
    {
     AdminCollegeService.getAllColleges().then(function(response){
     $scope.colleges=response.data;
    });
    }
    }

我在我的索引页面中包含了dirPagination.js。但现在它显示空页面。有时它只是不停地加载而不停止。我从控制器得到响应，但我无法在html.Am中显示我在代码中遗漏了什么？

Answer 1

我在plnk

中放了一个样本

我猜你的代码.. 你需要在某个地方调用booktabs=T。

检查链接是否有帮助也将代码放在这里。

<强> HTML

getAllColleges()

<强> CONTROLLER

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="dirpaginatio.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    {{colleges}}
    <table class="table table-stripped" >
      <tr data-dir-paginate="college in colleges | itemsPerPage: 3"
      data-current-page="currentPage"> 
      <td>{{$index + 1}}</td>
      <td><a href="#!/collegedetails/{{college.collegeId}}">
      {{college.name}}</a></td>
      <td>{{college.typeName}}</td>
      </tr>
    </table>
    <dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)" ></dir-pagination-controls>
  </body>

</html>

angularjs 1.5

1 个答案: