Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
AngularJS UI Grid (ng-grid) Example
Keywords : Angularjs ui grid module example, Angularjs ng-grid or ui grid example, Angularjs ui grid example with demo
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Angularjs UI-Grid Example </title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ui-grid.info/release/ui-grid.js"></script> <link rel="stylesheet" href="https://ui-grid.info/release/ui-grid.css" type="text/css"> <script type="text/javascript"> var app = angular.module("uigridApp", ["ui.grid"]); app.controller("uigridCtrl", function ($scope) { $scope.users = [ { name: "Madhav Sai", age: 10, location: 'Nagpur' }, { name: "Suresh Dasari", age: 30, location: 'Chennai' }, { name: "Rohini Alavala", age: 29, location: 'Chennai' }, { name: "Praveen Kumar", age: 25, location: 'Bangalore' }, { name: "Sateesh Chandra", age: 27, location: 'Vizag' } ]; }); </script> <style type="text/css"> .myGrid { width: 500px; height: 200px; } </style> </head> <body ng-app="uigridApp"> <h2>AngularJS UI Grid Example</h2> <div ng-controller="uigridCtrl"> <div ui-grid="{ data: users }" class="myGrid"></div> </div> </body> </html>
Click Here to See Result
Result
Previous
Next