Laravel 4 和 Angular JS 以及 Twitter Bootstrap 3 分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19817540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 4 and Angular JS and Twitter Bootstrap 3 Pagination
提问by devo
Edit:
编辑：
I need a pagination in my Laravel 4 - Angular JS application which is structured using twitter bootstrap 3. You may suggest the angularui-bootstrap pagination. But I am not planning to use this right now. I need to explore and utilize the features of Laravel pagination with angular.js. I have seen one blog article herewhich describe the same. But my bad luck, it is not working and there is a lot of mistakes in the article.
我需要在我的 Laravel 4 - Angular JS 应用程序中使用 twitter bootstrap 3 进行分页。您可以建议使用angularui-bootstrap pagination。但我现在不打算使用它。我需要通过 angular.js 探索和利用 Laravel 分页的功能。我在这里看到了一篇博客文章，其中描述了相同的内容。但是我的运气不好，它不起作用并且文章中有很多错误。
So based on that article, I have a Laravel controller function which uses paginationlike this, Please not that, I am converting my return data to array using toArray().
所以根据那篇文章，我有一个 Laravel 控制器函数，它使用这样的分页，请注意，我正在使用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
);
}
}
Now see how it is loaded the data in my Firebug console using angularjs REST http $resourcecall,
现在看看它是如何使用 angularjs REST http$resource调用在我的 Firebug 控制台中加载数据的，
Here I have some pagination details such as total, per_page, current_page, last_page, fromand toincluding my data.
在这里，我有一些分页详细信息，例如total, per_page, current_page, last_page，from并to包括我的data.
And now look what I am doing in angular script,
现在看看我在用 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 = [];
});
};
}
And my view,
而我的观点，
<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-->
And the paginate directive,
和分页指令，
app.directive( 'paginate', [ function() {
return {
scope: { results: '=paginate' },
template: '<ul class="pagination" ng-show="totalPages > 1">' +
' <li><a ng-click="firstPage()">«</a></li>' +
' <li><a ng-click="prevPage()">‹</a></li>' +
' <li ng-repeat="n in pages">' +
' <a ng-bind="n" ng-click="setPage(n)">1</a>' +
' </li>' +
' <li><a ng-click="nextPage()">›</a></li>' +
' <li><a ng-click="last_page()">»</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 );
}
}
}]);
Now I am getting maximum 10 records in my html table, the pagination links are not working.
现在我的 html 表中最多有 10 条记录，分页链接不起作用。
Console shows Error: results is undefinedwith the pagination directive.
控制台显示Error: results is undefined分页指令。
回答by Alexey
I prepared a working example for your case http://jsfiddle.net/alexeime/Rd8MG/101/
Change Careerservice for your code to work.
Hope this will help you
EDIT:
Edited jsfiddle with index number http://jsfiddle.net/alexeime/Rd8MG/106/
我为您的案例准备了一个工作示例http://jsfiddle.net/alexeime/Rd8MG/101/
更改Career服务以使您的代码正常工作。
希望这会帮助你
编辑：
用索引号编辑 jsfiddle http://jsfiddle.net/alexeime/Rd8MG/106/
回答by Oddman
You haven't bound your careers to results. Just make it:
paginate="careers"instead. However, I did realise there's a mistake there in my original article as well - and that is that in your paginate directive, where it defines scope - it should look like this:
你没有把你的事业和结果联系在一起。只要做到：
paginate="careers"相反。但是，我确实意识到我原来的文章中也有一个错误——那就是在你的 paginate 指令中，它定义了范围——它应该是这样的：
scope: { results: '=paginate' },
What this is doing, is telling our directive to bind "results" to the $scope object, like so:
这样做的目的是告诉我们的指令将“结果”绑定到 $scope 对象，如下所示：
$scope.results
This will then bind to the result set (in this case, careers) and use that as the basis for the pagination work.
然后这将绑定到结果集（在本例中为职业）并将其用作分页工作的基础。
Hope that helps!
希望有帮助！
