In this article i am going to explain how to use ng-grid in AngularJS , ng-grid example in AngularJS.
Before using ng-grid in AngularJS you have to add the following references.
1.JQuery
2.AngularJS
3.ngGrid's javascript files
4.ngGrid css files
you can download the above references from this link: angular ngGrid
Consider you have the following HTML code
<html ng-app="myApp">
<head>
<title>My ngGrid Demo</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="myAppstyle.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>
</html>
now add some styles to grid-add following css to your myAppstyle.css
.ngGridStyle {
border: 1px solid black;
width: 200px;
height: 400px
}
Now add the following code to your app.js file
var myAppRoot = angular.module('myApp', ['ngGrid']);
myAppRoot.controller('MyngGridCtrl', function($scope) {
//define some object here
$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
{ID:2, Name:'Sachin' , Country:'India'},
{ ID:3, Name:'Smith' , Country:'UK'} ];
//now add the above object to your ngGrid
$scope.myGrid={data:'myData'};
});
Now when you run your code you will see the data in Grid.
To hide specific columns in ng-grid read: hide columns in ng-grid AngularJS
Before using ng-grid in AngularJS you have to add the following references.
1.JQuery
2.AngularJS
3.ngGrid's javascript files
4.ngGrid css files
you can download the above references from this link: angular ngGrid
Consider you have the following HTML code
<html ng-app="myApp">
<head>
<title>My ngGrid Demo</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="myAppstyle.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>
</html>
now add some styles to grid-add following css to your myAppstyle.css
.ngGridStyle {
border: 1px solid black;
width: 200px;
height: 400px
}
Now add the following code to your app.js file
var myAppRoot = angular.module('myApp', ['ngGrid']);
myAppRoot.controller('MyngGridCtrl', function($scope) {
//define some object here
$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
{ID:2, Name:'Sachin' , Country:'India'},
{ ID:3, Name:'Smith' , Country:'UK'} ];
//now add the above object to your ngGrid
$scope.myGrid={data:'myData'};
});
Now when you run your code you will see the data in Grid.
To hide specific columns in ng-grid read: hide columns in ng-grid AngularJS
For more articles on AngularJS refer: angularJS
No comments:
Post a Comment