What
is ng-table? How to achieve it?
The ngTable is a simpler version of ngGrid and
Its uses tables to render the data so it's get the default row height. It's
very nice little library used to render simple table in angularjs.
Go to below ng-table library and download
reference file as given below link
Both libraries have some drawbacks as given
below.
1.
The ng-grid is not support the
variable row heights based on your content.
2.
The ng-table create three separate
tables for the header, body and footer for maintain the variable row heights.
Steps to achieve the ng-Table as given below
1.
Add the angularjs reference file
2.
Add ng-table reference file
3.
Written the JavaScript code to
render the ng-table data.
4.
Written the HTML code for render the
DOM with ng-table data.
The
AngularJs Reference file as given below
The ng-table Reference file as given link
The JavaScript code sample
var app =
angular.module('ngTableApp',
['ngTable']);
app.controller('ngTableCtrl', function ($scope) {
$scope.students = [{
Id: 001,
name: "Anil
Singh",
age: 29
}, {
Id: 002,
name: "Sunil
Singh",
age: 25
}, {
Id: 003,
name: "Sushil
Singh",
age: 20
}, {
Id: 004,
name: "Dilip
Singh",
age: 29
}, {
name: "Upendra
Singh",
age: 30
}];
});
The HTML code sample
<div ng-app="ngTableApp">
<div ng-controller="ngTableCtrl">
<div>
<h2>Student Detail using
ngTablet</h2>
</div>
<table ng-table class="table">
<tr ng-repeat="stud in
students">
<td data-title="'Id'">{{stud.Id}}</td>
<td data-title="'Name'">{{stud.name}}</td>
<td data-title="'Age'">{{stud.age}}</td>
</tr>
</table>
</div>
</div >
The full(JavaScript + HTML) live demo code
sample
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.css">
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.js"></script>
<style>
.ng-table {
border: 1px solid #000;
width: 100%;
}
</style>
<script>
var app =
angular.module('ngTableApp',
['ngTable']);
app.controller('ngTableCtrl', function ($scope) {
$scope.students = [{
Id: 001,
name: "Anil
Singh",
age: 29
}, {
Id: 002,
name: "Sunil
Singh",
age: 25
}, {
Id: 003,
name: "Sushil
Singh",
age: 20
}, {
Id: 004,
name: "Dilip
Singh",
age: 29
}, {
name: "Upendra
Singh",
age: 30
}];
});
</script>
</head>
<body ng-app="ngTableApp">
<div ng-controller="ngTableCtrl">
<div>
<h2>Student Detail using
ngTablet</h2>
</div>
<table ng-table class="table">
<tr ng-repeat="stud in
students">
<td data-title="'Id'">{{stud.Id}}</td>
<td data-title="'Name'">{{stud.name}}</td>
<td data-title="'Age'">{{stud.age}}</td>
</tr>
</table>
</div>
</body>
</html>
Go to
the output link http://embed.plnkr.co/NSK9j1/preview
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
0 comments:
Post a Comment