Bearbeiten:

Ich benötige eine Paginierung in meiner Laravel 4 - Angular JS - Anwendung, die mit Twitter Bootstrap 3 strukturiert istAngularui-Bootstrap-Paginierung. Aber ich habe nicht vor, dies jetzt zu verwenden. Ich muss die Funktionen der Laravel-Paginierung mit angular.js untersuchen und nutzen. Ich habe einen Blog gesehenArtikel hier die beschreiben das gleiche. Aber mein Pech, es funktioniert nicht und der Artikel enthält viele Fehler.

Ausgehend von diesem Artikel habe ich eine Laravel-Controller-Funktion, die verwendet wirdSeitennummerierung Bitte nicht, ich konvertiere meine Rückgabedaten in ein Array mittoArray().

class CareerController extends BaseController {
    public function index() {
        $careers = Career::paginate( $limit = 10 );
        return Response::json(array(
            'status'  => 'success',
            'message' => 'Careers successfully loaded!',
            'careers' => $careers->toArray()),
            200
        );
    }
}

Nun sehen Sie, wie es die Daten in meine Firebug-Konsole mit anglejs REST http geladen$resource Anruf,

Hier habe ich einige Paginierungsdetails wietotal, per_page, current_page, last_page, from undto einschließlich meinerdata.

Und jetzt schauen Sie, was ich in eckiger Schrift tue,

var app = angular.module('myApp', ['ngResource']); // Module for the app
// Set root url to use along the scripts
app.factory('Data', function(){
    return {
        rootUrl: "<?php echo Request::root(); ?>/"
    };
});
// $resource for the career controller
app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) {
   return $resource( Data.rootUrl + 'api/v1/careers/:id', { id: '@id'}, {
    query: {
        isArray: false,
        method: 'GET'
    }
   });
}]);
// the career controller
function CareerCtrl($scope, $http, Data, Career) {
    // load careers at start
    $scope.init = function () {

        Career.query(function(response) {   
            $scope.careers = response.careers.data;  
            $scope.allCareers = response.careers; 

        }, function(error) {

            console.log(error);

            $scope.careers = [];
        }); 

    };
}

Und meiner Ansicht nach

<div class="col-xs-8 col-sm-9 col-md-9" ng-controller="CareerCtrl" data-ng-init="init()">      
        <table class="table table-bordered">
          <thead>
              <tr>
                  <th width="4">S.No</th>
                  <th>Job ID</th>
                  <th>Title</th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="career in careers">
                  <td style="text-align:center">{{ $index+1 }}</td>
                  <td>{{ career.job_id }}</td>
                  <td>{{ career.job_title }}</td>
              </tr>
              <tr ng-show="careers.length == 0">
                  <td colspan="3" style="text-align:center"> No Records Found..!</td>
              </tr>
          </tbody>
        </table>
        <div paginate="allCareers"></div>
</div><!--/row-->

Und die Paginat Direktive,

app.directive( 'paginate', [ function() {
    return {
      scope: { results: '=paginate' },
      template: '<ul class="pagination" ng-show="totalPages > 1">' +
               '  <li><a ng-click="firstPage()">&laquo;</a></li>' +
               '  <li><a ng-click="prevPage()">&lsaquo;</a></li>' +
               '  <li ng-repeat="n in pages">' +
               '    <a ng-bind="n" ng-click="setPage(n)">1</a>' +
               '  </li>' +
               '  <li><a ng-click="nextPage()">&rsaquo;</a></li>' +
               '  <li><a ng-click="last_page()">&raquo;</a></li>' +
               '</ul>',
      link: function( scope ) {
       var paginate = function( results ) {
         if ( !scope.current_page ) scope.current_page = 0;

         scope.total = results.total;
         scope.totalPages = results.last_page;
         scope.pages = [];

         for ( var i = 1; i <= scope.totalPages; i++ ) {
           scope.pages.push( i ); 
         }

         scope.nextPage = function() {
           if ( scope.current_page < scope.totalPages ) {
             scope.current_page++;
           }
         };

         scope.prevPage = function() {
           if ( scope.current_page > 1 ) {
             scope.current_page--;
           }
         };

         scope.firstPage = function() {
           scope.current_page = 1;
         };

         scope.last_page = function() {
           scope.current_page = scope.totalPages;
         };

         scope.setPage = function(page) {
           scope.current_page = page;
         };
       };

       var pageChange = function( newPage, last_page ) {
         if ( newPage != last_page ) {
           scope.$emit( 'page.changed', newPage );
         }
       };

       scope.$watch( 'results', paginate );
       scope.$watch( 'current_page', pageChange );
     }
   }
 }]);

Jetzt bekomme ich maximal 10 Datensätze in meiner HTML-Tabelle, die Paginierungslinks funktionieren nicht.

Konsole zeigtError: results is undefined mit der Paginierungsrichtlinie.