Bind Sample Data in NG Grid In AngularJS

  1. <!doctype html>  
  2. <html ng-app="ngGridApp">  
  3. <head>  
  4.     <title>Binding Data to NG Grid </title>  
  5.     <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
  7.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>  
  8.     <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>  
  9.   
  10.     <style>  
  11.         .ngGridStyle {  
  12.             border: 2px solid gray;  
  13.             width: 600px;  
  14.             height: 220px;  
  15.         }  
  16.     </style>  
  17.     <script>  
  18.   
  19.         var app = angular.module('ngGridApp', ['ngGrid']);//Injected ng Grid   
  20.         app.controller('ngGridController', function ($scope) {  
  21.             $scope.Data = [  
  22.                 { Name: "Anil", City: "Bangalore", Skill: ' ASP.NET' },  
  23.                 { Name: "Umesh", City: "CHENAI", Skill: 'ANGULAR JS, ASP' },  
  24.                 { Name: "Pradeep", City: "Bangalore", Skill: 'SQL Server' },  
  25.                 { Name: "Kumar", City: "Delhi", Skill: ' ASP.NET' }];  
  26.   
  27.             $scope.ngGridView = { data: 'Data'};//Assigned to Data to ng grid  
  28.         });  
  29.     </script>  
  30.   
  31. </head>  
  32. <body ng-controller="ngGridController">  
  33.   
  34. <div class="ngGridStyle" ng-grid="ngGridView"></div>  
  35. </body>  
  36. </html>