AngularJS ngGrid – example

ngGrid is a powerful grid library; however, there is confusion in how it works. Here is an example of ngGrid that works for the following versions:

  • ngGrid – 2.x
  • AngularJS – 1.3.14

Step 1

Make sure that the ng-app and ng-controller for angular is defined in html before inserting the div for the grid.
Following is an example of ng-app and ng-controller

ng-app='myApp' ng-controller='myController'

Insert following div example in html.


Step 2

In a javascript file, say ‘app.js’, define the angular module as follows with ngGrid.

var app = angular.module('myApp', ['ngGrid']);

Step 3

In the controller, define the gridOptions as follows:

app.controller('myController', ['$scope','$http', function($scope, $http){
console.log('user name : ' + $scope)
console.log('user name : ' + $http)
$scope.gridOptions = { data: 'candidates',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'lastName', displayName: 'Last Name'}

$scope.candidates = data.candidates;