2017-09-15 58 views
0

我正在使用Angularjs爲我的application.I面臨問題在使用分頁選項。我使用dir-paginate選項來創建分頁。分頁在angularjs 1.5

這裏是我的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 page.But現在顯示的是空page.Sometimes它只是不斷停止加載。我從控制器獲得響應,但我無法顯示在html.Am我缺少代碼中的東西?

+0

,你可以把你的整個HTML。和你的整個控制器,因爲,只看到tr -repeat。 –

回答

0

我把樣品中plnk

我猜你的代碼.. 你需要調用在某處getAllColleges()

檢查鏈接是否有幫助,也可以將代碼放在下面。

HTML

<!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="[email protected]" 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="[email protected]" 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> 

控制器

var app = angular.module('plunker', ['angularUtils.directives.dirPagination']); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.currentPage = 1; 

    $scope.itemsPerPage = 3; 
    $scope.getAllColleges = function() 
    { 
     //AdminCollegeService.getAllColleges().then(function(response){ 
     //$scope.colleges=response.data; 
     //}); 
     $scope.colleges = [ 
     {name:'one', typeName:'a'}, 
     {name:'two', typeName:'b'}, 
     {name:'three', typeName:'c'}, 
     {name:'four', typeName:'d'}, 
     {name:'five', typeName:'e'} 
     ]; 
    }; 

    $scope.getAllColleges(); 
}); 
+0

嗨,謝謝你的回覆。它還適用於角度1.3嗎? –

+0

它顯示空數據 –

+0

你的問題是關於角1.5,也..圖書館dirpagination已棄用。我只根據你的代碼提供一個例子,猜測服務的哪部分知道strcutrura。對不起,如果沒有多大幫助。 –