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