Angularjs Table
Advertisements
Angularjs Table
The ng-repeat directive is use for draw tables easily. Table data are generally repeatable. Following code is design a table using ng-repeat directive;
Example
<table>
<tr ng-repeat="x in names">
<td>{{ x.Student}}</td>
<td>{{ x.Marks}}</td>
</tr>
</table>
Style table Using CSS
You can also style your table using CSS same like below.
Example
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
Example of AngularJS using Table
Example
<html>
<head>
<title>AngularJS Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Application Using Table</h2>
<div ng-app="" ng-controller="studentController">
<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>
</div>
<script>
function studentController($scope) {
$scope.student = {
subjects:[
{name:'Physics',marks:60},
{name:'Chemistry',marks:70},
{name:'Math',marks:65},
{name:'English',marks:62},
{name:'Hindi',marks:67}
],
};
}
</script>
</body>
</html>
Result
AngularJS Application Using Table
| Name | Marks |
|---|---|
| {{ subject.name }} | {{ subject.marks }} |
Google Advertisment