Blog for web designers

Repeating table data using ng-repeat

How to repeat table data using ng-repeat directive of angularJS

In this post I am going to show you how to repeat table data using ng-repeat directive of AngularJS. First of all we will create a object first and assign some data inside that object. Copy the below code and save it it a new js file called script.js


var app = angular.module("myApp", []);

app.controller('list_employees', function($scope){
	var employees = [
		{firstName:"Santosh", lastName:"Kumar", salary:20369},
		{firstName:"Duryodhana", lastName:"alpha", salary:60800},
		{firstName:"Bharat", lastName:"beta", salary:60020},
		{firstName:"Krishna", lastName:"gamma", salary:30010},
		{firstName:"Pooja", lastName:"thita", salary:10200}
	]
	$scope.employees = employees;	
});

In the above code we first created a module which is also known as the container of our application. It is very important to define an application name and assign it to the container of our application in our HTML template.
var app = angular.module("myApp", []);

Secondly I have created a controller and created a object called employees. Controller is just a javascript function. In this case the first parameter “list_employees” is a name of the controller and the second one is the function. Inside that function I have created an object where all the employees are registered.

app.controller('list_employees', function($scope){
var employees = [
{firstName:"Santosh", lastName:"Kumar", salary:20369},
{firstName:"Duryodhana", lastName:"alpha", salary:60800},
{firstName:"Bharat", lastName:"beta", salary:60020},
{firstName:"Krishna", lastName:"gamma", salary:30010},
{firstName:"Pooja", lastName:"thita", salary:10200}
] $scope.employees = employees;
});

Now we are going to create a HTML template where we are going to display all the list of employees using ng-repeat directive.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="list_employees">
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Salary Name</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{ employee.firstName }}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Now lets use the same directive as nested


var app = angular.module("myApp", []);

app.controller('list_countries', function($scope){
		var countries = [ 
		{
			name:"India",
			cities: [
				{name:"New Delhi"},
				{name:"Mumbai"},
				{name:"Banglore"}
			]			
		},
		{
			name:"china",
			cities: [
				{ name:"Shangai" },
				{ name:"city two" },
				{ name:"city three" }
			]			
		},
		{
			name:"nepal",
			cities: [
				{name:"kathmandu"},
				{name:"pokhara"},
				{name:"Jhapa"}
			]			
		},
		{
			name:"Russia",
			cities: [
				{name:"city one"},
				{name:"city two"},
				{name:"city three"}
			]			
		},
		{
			name:"Japan",
			cities: [
				{name:"heroshima"},
				{name:"Nagasaki"},
				{name:"city three"}
			]			
		}
		]
		$scope.countries = countries;

});

Below is the HTML code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script> -->
<script src="js/script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="list_countries">
<ul>

<li ng-repeat="country in countries"> {{ country.name }}
<ul>

<li ng-repeat="city in country.cities">
{{ city.name }}
</li>

</ul>
</li>
</ul>
</div>
</body>
</html>

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.