ngTable Examples

Directive ng-repeat is used to draw table easily.
e.g.

<html>
<head>
<title>Angular JS Table</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid black;
padding: 4px;
}
</style>
</head>
<body>
<h2>AngularJS Tables</h2>
<div ng-app = "details" ng-controller = "studentController">
<table>
<tr>
<th>Subject Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td ng-if="$odd" style="background-color:#ff6600">{{ subject.name }}</td>
<td ng-if="$even">{{ subject.name }}</td>
<td ng-if="$odd" style="background-color:#ff6600">{{ subject.marks }}</td>
<td ng-if="$even">{{ subject.marks }}</td>
</tr>
</table>
</td>
</div>
<script>
var details= angular.module("details", []);
details.controller('studentController', function($scope) {
$scope.student = {
subjects:[
{name:'English',marks:85},
{name:'Math',marks:90},
{name:'Physics',marks:80},
{name:'Chemistry',marks:75}
]
};
});
</script>
</body>
</html>

Output
Watch this What is Angular 8 video

AngularJS Tables ngTable Examples Directive ng-repeat is used to draw table easily. e.g. <html> <head> <title>Angular JS Table</title> <script src = \"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"></script> <style> table, th , td { border: 1px solid black; padding: 4px; } </style> </head> <body> <h2>AngularJS Tables</h2> <div ng-app = \"details\" ng-controller = \"studentController\"> <table> <tr> <th>Subject Name</th> <th>Marks</th>


AngularJS Tables
output7

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
23 + 26 =