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

NameMarks
Physics60
Chemistry70
Math65
English62
Hindi67