Display data in Table

Introduction

In my previous article, I have discussed how to create a simple helloworld application using angularjs. In this atrticle demonstrates how to display list of data in html table using angularjs.

Getting Started

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

 <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 list of sudents in html table using angularjs, first create angularjs module and controller as like i have explained in my previous article. Inside the controller add list of sudents to the scope like below code.
 var app=angular.module("mytableapp",[]);  
 app.controller("mytablecontroller",function($scope){  
      $scope.students=[  
      {StudentRollNo:1,StudentName:"Kailash",Class:"1 std"},  
      {StudentRollNo:2,StudentName:"Sudhir",Class:"1 std"},  
      {StudentRollNo:3,StudentName:"Pankaj",Class:"2 std"},  
      {StudentRollNo:4,StudentName:"Panxi",Class:"2 std"},  
      {StudentRollNo:5,StudentName:"Praban",Class:"3 std"},  
      {StudentRollNo:6,StudentName:"Praphul",Class:"3 std"},  
      ]  
 });
above code first created an module with name 'mytableapp' and a controller with name 'mytablecontroller'. Inside the controller, I create a property of scope named 'students' and assigned list of sudents with details like StudentName and StudentRollNo, this property we need to bind to html table for displaying in table.

Create a html file and replace below html code. you can see the in the html code i have used html table for display list of students, first i have declared a table in the html and after that i have declared table header column.

In the table body i have declared a tr and inside the tr element i have used ng-repeat directive. you can see i have set ng-repeat directive value like this 'item in students'. It means ng-repeat iterates the sundent list and assigned one by one student details into item object.
 <!DOCTYPE html>  
 <HTML ng-app="mytableapp">  
 <script src="angular.min.js"></script>  
 <script src="index.js"></script>  
 <TITLE> Student List</TITLE>  
 <BODY ng-controller="mytablecontroller" border="1">  
 <h1>Student List</h1>  
 <hr/>  
 <table>  
 <thead>  
 <tr>  
 <td>Roll No.</td>  
 <td>Student Name.</td>  
 <td>Class.</td>  
 </tr>  
 </thead>  
 <tbody>  
 <tr ng-repeat="item in students">  
 <td>{{item.StudentRollNo}}</td>  
 <td>{{item.StudentName}}</td>  
 <td>{{item.Class}}</td>  
 </tr>  
 </tbody>  
 </table>  
 </BODY>  
 </HTML>
Inside in each td i have used angularjs expression for display student details like name, roll no, class. Save the html file and run in browser you will see list of student in table format.

Summary

In this article we have demonstrated about ng-repeat, hope this article may helpful to you.

Thanks
Kailash Chandra Behera

By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)