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>
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"},
]
});
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>
Summary
In this article we have demonstrated about ng-repeat, hope this article may helpful to you.
Thanks
Tags
AngularJS