Level 52
Interested. I feel like we are both over-thinking this to be honest.
Aug 29, 2015
4
Level 5
How to make pagination wih Laravel5 and Anjular
Iam new to Angular js and have no much idea of it,But i will practice it in my free time and this is my first angular+laravel work where i want to paginate data.But iam facing prolem.Can any one provide me codes or help me to correct the code mention below..
Iam following this tutorialhttp://blog.kettle.io/dynamic-pagination-angularjs-laravel/
controller
<?php namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Models\Product;
use Request;
use Response;
class PostController extends Controller {
public function json()
{
$posts = Product::paginate(5); // 5 is the number of items to show per page
return Response::json($posts);
}
}
Routes
Route::get('posts', function() {
return Response::view('posts');
});
Route::get('posts-json', array(
'as' => 'posts-json',
'uses' => 'PostController@json'
));
view
@extends('layouts.master')
@section('content')
<body ng-app="kettle">
<div class="col-md-6 col-md-offset-3" ng-controller="postController" ng-init="getPosts()">
<h2>Posts</h2>
<div class="list-group" >
<a href="#" class="list-group-item" ng-repeat="post in posts" >
<h4 class="list-group-item-heading">[[ post.name ]]</h4>
<p class="list-group-item-text"></p>
</a>
</div>
<div>
<posts-pagination></posts-pagination>
</div>
</div>
</body>
@stop
app.js
@section('script')
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
var app = angular.module('kettle', ['ngResource'],
function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
app.controller('PostController', [ '$http', '$scope', function($http, $scope){
$scope.posts = [];
$scope.totalPages = 0;
$scope.currentPage = 1;
$scope.range = [];
$scope.getPosts = function(pageNumber){
if(pageNumber===undefined){
pageNumber = '1';
}
$http.get('/posts-json?page='+pageNumber).success(function(response) {
$scope.posts = response.data;
$scope.totalPages = response.last_page;
$scope.currentPage = response.current_page;
// Pagination Range
var pages = [];
for(var i=1;i<=response.last_page;i++) {
pages.push(i);
}
$scope.range = pages;
});
};
}]);
</script>
<script>
app.directive('postsPagination', function(){
return{
restrict: 'E',
template: '<ul class="pagination">'+
'<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getPosts(1)">«</a></li>'+
'<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getPosts(currentPage-1)">‹ Prev</a></li>'+
'<li ng-repeat="i in range" ng-class="{active : currentPage == i}">'+
'<a href="javascript:void(0)" ng-click="getPosts(i)">{{i}}</a>'+
'</li>'+
'<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getPosts(currentPage+1)">Next ›</a></li>'+
'<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getPosts(totalPages)">»</a></li>'+
'</ul>'
};
});
</script>
@stop
The error is
Use of undefined constant i - assumed 'i' (View: C:\xampp\htdocs\project\resources\views\posts.blade.php)
Actually iam confuse where should i have useapp.directive..... code above mention
Iam following the tutorials from http://blog.kettle.io/dynamic-pagination-angularjs-laravel/
Level 5
if you know than please help me
Level 54
Looks like you're using bootstrap.. no need to reinvent the wheel, use angular-ui-bootstrap, all the directives are already done for you. :)
Level 1
Inside your directive template change {{i}} to [[i]]
Please or to participate in this conversation.