my exp with ui-grid

dynamically changing data for ui-grid

by Aswin Devarajan

HTML

<p>viva la vida</p>
<div ui-grid="gridOptions" class="grid"></div>

CSS

</style> <!-- remove this,
it is just for jsfiddle --> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> <style> .grid {
  width: 500px;
  height: 250px;
}

JavaScript

var app = angular.module('myApp', ['ngTouch', 'ui.grid']);
app.controller('mainCtrl', ['ProductService', '$scope', function(ProductService, $scope) {
  $scope.gridOptions = {
    excludeProperties: '__metadata',
    enablePaginationControls: false
  }

  $scope.load = function() {
    ProductService.readAll(5,1).then(function(response) {
    	console.log(response.data);
      $scope.gridOptions.data = response.data;
    })
  }

  $scope.load();
}]);

(function() {
  angular.module('myApp').service('ProductService', ['$http', ProductService]);

  function ProductService($http) {
    var self = this;
    var baseUrl = 'https://api.backand.com/1/objects/';
    var anonymousToken = {
      'AnonymousToken': '78020290-5df3-44b8-9bdb-7b3b4fea2f25'
    };
    var objectName = 'products';
            self.readAll = function (pageSize, pageNumber) {
            return $http({
                method: 'GET',
                url: baseUrl + objectName,
                params: {
                    pageSize: pageSize,
                    pageNumber: pageNumber
                },
                headers: anonymousToken
            }).then(function (response) {
                return response.data;
            });
        };
  }
}());