AngularJS Tables

In the previous chapter we have learnt about the AngularJS controllers and in this chapter we will be learning about AngularJS filters.

AngularJS Tables

ng-repeatdirective is used to repeat the elements from array and to display elements of array in HTML tables

<tr ng-repeat="student in students">
   <td>{{ student.name  }}</td>
   <td>{{ student.marks }}</td>
</tr>

below are meaning of some of the elements -

Variable	Explanation
`students`	Name of array
`student`	Array element used in each iteration
`student.name`	Access name of student from array element
`student.marks`	Access marks of student from array element

AngularJS Tables : Examples

AngularJS Tables #1 : Simple Table Example

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<table border="1">
   <tr>
      <th>Name</th>
      <th>Marks</th>
   </tr>
   <tr ng-repeat="student in students">
      <td>{{ student.name }}</td>
      <td>{{ student.marks }}</td>
   </tr>
</table>
</div>
<script>
function studentController($scope) {
    $scope.students = [
         {name:'Suraj',marks:89},
         {name:'Pooja',marks:81},
         {name:'Rajes',marks:69},
         {name:'Omkar',marks:61},
         {name:'Raman',marks:93},
         {name:'Amana',marks:80},
         {name:'Parth',marks:85}
      ]
}
</script>
</body>
</html>

Output :

Try it yourself