Post
Ask Question

Display Data In Table Using Angular

The AngularJS ng-repeat directive helps to display a list of data in HTML table. Let's discuss a little about ng-repeat. The ng-repeat directive is perfect for making an HTML table, displaying one table row for each object, and one table data for each object property. See the example below.

  1. <element ng-repeat="expression"></element>   
The ng-repeat directive instantiates a template once per item from a collection. Each template instance gets its own scope where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Now, we will demonstrate how to display the list of students in HTML table using AngularJS. First, create an AngularJS Module and Controller as I have explained in my previous article. Inside the Controller, add a list of students to the scope like in the below code.
  1. var app=angular.module("mytableapp",[]);    
  2.  app.controller("mytablecontroller",function($scope){    
  3.       $scope.students=[    
  4.       {StudentRollNo:1,StudentName:"Kailash",Class:"1 std"},    
  5.       {StudentRollNo:2,StudentName:"Sudhir",Class:"1 std"},    
  6.       {StudentRollNo:3,StudentName:"Pankaj",Class:"2 std"},    
  7.       {StudentRollNo:4,StudentName:"Panxi",Class:"2 std"},    
  8.       {StudentRollNo:5,StudentName:"Praban",Class:"3 std"},    
  9.       {StudentRollNo:6,StudentName:"Praphul",Class:"3 std"},    
  10.       ]    
  11.  });    

In the above code, first, we created a module with name 'mytableapp' and a Controller with the name 'mytablecontroller'. Inside the Controller, I created a property of scope named 'students' and assigned the list of sudents with details like StudentName and StudentRollNo. We need to bind this property to teh HTML table for displaying in table.

Create an HTML file and replace the below code. You can see that I have used HTML table for displaying the list of students. First, I have declared a table in the HTML and after that, I have declared the table header column.

In the table body, I have declared a <tr> and inside it, I have used ng-repeat directive. I have set ng-repeat directive value like this - 'item in students'. It means that the ng-repeat iterates the student list and assigned student details one by one into item object.

  1. <HTML ng-app = "myapp">  
  2.       <TITLE> AngularJS Learning(anchoScroll)</TITLE>  
  3.       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  4.       <script>  
  5.            var myapp=angular.module("myapp",[]);  
  6.            myapp.filter('displayPageData', function() {  
  7.                              return function(input, start) {  
  8.                              start = +start; //parse to int  
  9.                              return input.slice(start);  
  10.                              }  
  11.                         });  
  12.            myapp.controller("myappcont",function($scope){  
  13.                 $scope.currentPage = 0;  
  14.   
  15.            $scope.students=[  
  16.            {Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},  
  17.            {Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},  
  18.            {Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},  
  19.            {Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},  
  20.            {Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},  
  21.            {Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"},  
  22.            {Name:"test student1",Gender:"male",Class:"1std",Section:"a"},  
  23.            {Name:"Test Student2",Gender:"Male",Class:"2nd",Section:"B"},  
  24.            {Name:"Test Student3",Gender:"Male",Class:"3rd",Section:"C"},  
  25.            {Name:"Test Student4",Gender:"Male",Class:"1Std",Section:"A"},  
  26.            {Name:"Test Student5",Gender:"Male",Class:"2nd",Section:"B"},  
  27.            {Name:"Test Student6",Gender:"Male",Class:"3rd",Section:"C"},  
  28.            {Name:"Test Student7",Gender:"Male",Class:"1Std",Section:"A"},  
  29.            {Name:"Test Student8",Gender:"Male",Class:"2nd",Section:"B"},  
  30.            {Name:"Test Student9",Gender:"Male",Class:"3rd",Section:"C"}];  
  31.            });  
  32.   
  33.       </script>  
  34.       <BODY ng-controller="myappcont">  
  35.         <table border="1" style="width:80%">  
  36.         <caption>  
  37.         <h2>Student List</h2>  
  38.         </caption>  
  39.             <thead>  
  40.                 <tr>  
  41.                     <th>Name</th>  
  42.                     <th>Gender</th>  
  43.                     <th>Class</th>  
  44.                     <th>Section</th>  
  45.                 </tr>  
  46.             </thead>  
  47.             <tbody>  
  48.                 <tr ng-repeat="student in students">  
  49.                     <td>{{student.Name}}</td>  
  50.                     <td>{{student.Gender}}</td>  
  51.                     <td>{{student.Class}}</td>  
  52.                     <td>{{student.Section}}</td>  
  53.                 </tr>  
  54.             </tbody>  
  55.        </table>  
  56.     </BODY>  
  57.  </HTML>  
 
Next Recommended Reading How To Parse And Stringify JSON Data Using Angular