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
- ng-grid-2.0.14.debug.js
- ng-grid-2.0.14.min.js
- jquery-1.8.2.js
- 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;
};
}]);