2017-09-15 13 views
0

私のアプリケーションにAngularjsを使用しています。私はページネーションオプションを使用する際に問題に直面しています。私はページネーションを作成するためにdir-paginateオプションを使用しています。ここでangularjsのページ設定1.5

はここ

<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> 

が、私は今、それだけで空page.Sometimesにそれを表示している私のインデックスにdirPagination.jsをpage.But含まれている私の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; 
    }); 
    } 
    } 

である私のhtmlです私はコントローラからの応答を取得していますが、私はhtmlで表示することができません。コード内に何かがありませんか?

+0

あなたはあなたの全体のHTMLを入れることができます。あなたのコントローラー全体が原因で、tr -repeatだけが表示されます。 –

答えて

0

私はあなたがどこかでgetAllColleges()を呼び出す必要が ..私はあなたのコードのために推測plnk

中に試料を入れました。

こちらのコードをここに入力すると、リンクを確認してください。

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> 

CONTROLLER

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であり、またライブラリーのディスパージは廃止されました。私はstrcutruraを知っているサービスの部分を推測するあなたのコードに従って例を提供するだけです。申し訳ありませんが大いに役立つ場合。 –

関連する問題