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.

• javascript
• angularjs
• angularjs-factory

Share Improve this question Follow edited May 2, 2017 at 16:06 Setily 82211 gold badge99 silver badges2121 bronze badges asked Feb 19, 2014 at 7:57 sakhunzaisakhunzai 14.5k2626 gold badges103103 silver badges163163 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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