AngularJS मे Tables को आकर्षित करने के लिए Ng-repeat की Directive का उपयोग किया जाता है. AngularJS Ng-repeat Directive हमे AngularJS मे Tables को बनाने की अनुमति देता है. Ng-repeat Instructions HTML Element को दोहराता है जिसमें इसे जोड़ जाता है जब तक कि Array मे सभी Objects को Beyond नही किया जाता है.
AngularJS Ng-repeat के Directive का उपयोग JSON Data से Bind HTML Table मे किया जाता है. सबसे पहले JSON Data उत्पन्न होता है और फिर इसमे AngularJS Ng-repeat के Directive का उपयोग करके Bind HTML Table का उपयोग किया जाता है.
Angularjs के Applications मे Ng-table Module का उपयोग करके हम कार्य Systems को प्राप्त कर सकते है जैसे Table Format, Sorting, Filtering और Pageing मे Data को बहुत Code लिखे बिना भी दिखा सकते है.
AngularJS Table मे हम Repeatable Data को दिखा सकते है और इसमे Ng-repeat के Directive का उपयोग करके हम Table को आसानी से Atractice बना सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Table Example</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>.
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Ali",
lastName: "Khan",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>