Laravel 4 和 Angular JS 和 Twitter Bootstrap 3 分页

Question

编辑：

我需要在我的 Laravel 4 - Angular JS 应用程序中进行分页，该应用程序使用 twitter bootstrap 3 构建。你可以建议 angularui-bootstrap pagination。但我现在不打算使用它。我需要用 angular.js 探索和利用 Laravel 分页的特性。我看过一篇博客article here 描述了相同的内容。但是我运气不好，它不起作用，并且文章中有很多错误。

所以根据那篇文章，我有一个 Laravel 控制器函数，它像这样使用 pagination，请不要这样，我正在使用 toArray() 将返回数据转换为数组。

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
        );
    }
}

现在看看它是如何使用 angularjs REST http $resource 调用在我的 Firebug 控制台中加载数据的，

这里有一些分页细节，例如total、per_page、current_page、last_page、from 和to，包括我的data。

现在看看我在 Angular 脚本中做了什么，

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 = [];
        }); 

    };
}

我的观点，

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

还有分页指令，

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 );
     }
   }
 }]);

现在我的 html 表中最多有 10 条记录，分页链接不起作用。

控制台显示带有分页指令的Error: results is undefined。

Answer 1

我为您的案例准备了一个工作示例http://jsfiddle.net/alexeime/Rd8MG/101/
更改 Career 服务以使您的代码正常工作。
希望这会对您有所帮助
编辑：
编辑 jsfiddle 索引号为http://jsfiddle.net/alexeime/Rd8MG/106/

Answer 2

你的职业生涯并没有与结果挂钩。做吧： paginate="careers" 代替。但是，我确实意识到我的原始文章中也存在一个错误——那就是在你的分页指令中，它定义了范围——它应该如下所示：

scope: { results: '=paginate' },

这是在告诉我们的指令将“结果”绑定到 $scope 对象，如下所示：

$scope.results

然后这将绑定到结果集（在本例中为职业）并将其用作分页工作的基础。

希望有帮助！