I am new to angular js and am trying to build a simple grid with pagination. I have a factory object Entities which looks like this:
//app module
angular.module('project',['ngRoute','controllers', 'services'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
controller:'ListCtrl',
templateUrl:'list.html'
})
.when('/edit/:id',{
controller:'EditCtrl',
templateUrl:'form.html'
})
.otherwise({
redirectTo:'/'
})
}]);
//controller
angular.module('controllers',[])
.controller('ListCtrl',['$scope','Entities',function($scope ,Entities){
Entities.get(function(data){
$scope.entityCaption='Projects';
$scope.entities=data;
});
}])
// services module
angular.module('services', [])
.value('dataConfigs',
{
fetchUrl:'../fetch.php',
saveUrl:'../save.php',
entityName:'projects'
}
)
.factory('Entities', ['$http','$filter','dataConfigs', function($http,$filter,dataConfigs){
return{
pageNo:1,
rows:2,
sortBy:'id',
sortOrder:'desc',
get: function(callback){
$http({
url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&page='+this.pageNo+'&rows='+this.rows+'&sidx='+this.sortBy+'&sord='+this.sortOrder+'&format=assoc',
method: "POST"
}).success(function (data) {
callback(data);
});
},
getById:function(id,callback){
$http({
url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&where_id='+id+'&page=1&rows=1&sidx=id&sord=asc&format=assoc',
method: "POST"
}).success(function (data) {
if(data.records==1)
callback(data.rows[0]);
else
callback({});
});
},
prevPage:function(){
this.pageNo--;
},
setPage:function(){
//set pageNo to N
},
nextPage:function(){
this.pageNo++;
}
};
}]);
And I want to use the Entities factory object in the ListCtrl's list.html view, e.g:
list.html
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: Entities.pageNo == 0}">
<a href ng-click="Entities.prevPage();prePage()">« Prev</a>
</li>
<li ng-repeat="n in range(entities.total)" ng-class="{active: n == Entities.pageNo}" ng-click="Entities.setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: Entities.pageNo == entities.total - 1}">
<a href ng-click="Entities.nextPage()">Next »</a>
</li>
</ul>
</div>
I am not sure if this is possible. Please advise me how to e along this issue . I want to bind the pagination with the Entities object and all the pagination/sorting is done on the server-side so this object should remember the page no and sort order if we toggle b/w Edit and List view.
The server side script returns the number of records, no of pages and rows for the current page, e.g:
{"page":"1","total":4,"records":"8","rows":[..]}
The other thing is to watch the values of pageNo, sortOrder and sortBy Entities attribute.
I am new to angular js and am trying to build a simple grid with pagination. I have a factory object Entities which looks like this:
//app module
angular.module('project',['ngRoute','controllers', 'services'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
controller:'ListCtrl',
templateUrl:'list.html'
})
.when('/edit/:id',{
controller:'EditCtrl',
templateUrl:'form.html'
})
.otherwise({
redirectTo:'/'
})
}]);
//controller
angular.module('controllers',[])
.controller('ListCtrl',['$scope','Entities',function($scope ,Entities){
Entities.get(function(data){
$scope.entityCaption='Projects';
$scope.entities=data;
});
}])
// services module
angular.module('services', [])
.value('dataConfigs',
{
fetchUrl:'../fetch.php',
saveUrl:'../save.php',
entityName:'projects'
}
)
.factory('Entities', ['$http','$filter','dataConfigs', function($http,$filter,dataConfigs){
return{
pageNo:1,
rows:2,
sortBy:'id',
sortOrder:'desc',
get: function(callback){
$http({
url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&page='+this.pageNo+'&rows='+this.rows+'&sidx='+this.sortBy+'&sord='+this.sortOrder+'&format=assoc',
method: "POST"
}).success(function (data) {
callback(data);
});
},
getById:function(id,callback){
$http({
url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&where_id='+id+'&page=1&rows=1&sidx=id&sord=asc&format=assoc',
method: "POST"
}).success(function (data) {
if(data.records==1)
callback(data.rows[0]);
else
callback({});
});
},
prevPage:function(){
this.pageNo--;
},
setPage:function(){
//set pageNo to N
},
nextPage:function(){
this.pageNo++;
}
};
}]);
And I want to use the Entities factory object in the ListCtrl's list.html view, e.g:
list.html
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: Entities.pageNo == 0}">
<a href ng-click="Entities.prevPage();prePage()">« Prev</a>
</li>
<li ng-repeat="n in range(entities.total)" ng-class="{active: n == Entities.pageNo}" ng-click="Entities.setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: Entities.pageNo == entities.total - 1}">
<a href ng-click="Entities.nextPage()">Next »</a>
</li>
</ul>
</div>
I am not sure if this is possible. Please advise me how to e along this issue . I want to bind the pagination with the Entities object and all the pagination/sorting is done on the server-side so this object should remember the page no and sort order if we toggle b/w Edit and List view.
The server side script returns the number of records, no of pages and rows for the current page, e.g:
{"page":"1","total":4,"records":"8","rows":[..]}
The other thing is to watch the values of pageNo, sortOrder and sortBy Entities attribute.
- Entities in your html means you have $scope.Entities; – TestersGonnaTest Commented Feb 19, 2014 at 8:19
-
But I am unable to access it from view e.g
<li ng-class="{disabled: Entities.pageNo == 0}">without setting it to scope – sakhunzai Commented Feb 19, 2014 at 8:23 - 1 What I meant to say is exactly this: you can't access it if you don't set it to the scope. – TestersGonnaTest Commented Feb 19, 2014 at 8:24
- You are right, I think $scope attributes are only accessible in view – sakhunzai Commented Feb 19, 2014 at 8:29
- stackoverflow./questions/16545530/… – Jeeva J Commented Oct 13, 2016 at 12:26
1 Answer
Reset to default 5Please note that you're trying to get access to your factory from the HTML view.
This is impossible in AngularJS.
You have to bind entities to the $scope in your controller. And then you get access to the entities in your views through the $scope.
The $scope is the glue between controller and view in AngularJS. This pattern is close to MVVM in .NET technologies like Silverlight or WPF ...
Please read this part of the docs to really understand how AngularJS works inside !
http://docs.angularjs/guide/concepts
Hope it helps !