Adds

AngularJS Repeaters (ng-repeat directive)

The ng-repeat directive will repeat the HTML elements based on elements in the given expression.ng-repeat is similar to JSTL forEach tag in jsp.

How to use ng-repeat

<ul>
<li ng-repeat="val in list">
{{ val }}
</li>
</ul>






In the above code snippet we have used ng-repeat directive to construct an unordered list data. Similarly you can display data in tables by using ng-repeat directive. Let us understand this with an example.

The ng-repeat directive will repeat the HTML elements based on elements in the given expression.ng-repeat is similar to JSTL forEach tag in jsp.

How to use ng-repeat

<ul>
<li ng-repeat="val in list">
{{ val }}
</li>
</ul>


In the above code snippet we have used ng-repeat directive to construct an unordered list data. Similarly you can display data in tables by using ng-repeat directive. Let us understand this with an example.


Consider the code snippet given below.In this example,we created employee array which contains records of five employee.Each employee has First Name, Last Name, age and salary property. We want to display these data using a table in the html page. Lets see how easy it is to do that using ng-repeat directive. We used ng-repeat directive on employee object to loop each element of employees array and writing its value with the help of {{ }} expression in tabular format.




Nested ng-repeat Example

We are going to create an application which will display Country and corresponding cities in a tree structure as shown below. We want to display three countries and each countries has list of cities. We will use unordered list to display country and corresponding cities in a tree structure.

AngulaJS Scope

Let us design the application. We are going to create array of countries array and each country has cities properties which will be another array which contains list of cities for the corresponding country. Follow the steps mentioned below to implement this requirement.


Step 1 : Create the model

model.js

var app = angular.module('countryModule', []).controller(
			'countryControleer', function($scope) {
				var countries = [ {
					name: "India",
					cities: [
					         {name: "Chennai"},
					         {name: "Bangalore"},
					         {name: "Delhi"},
					         ]
				},
				{
					name: "USA",
					cities: [
					         {name: "Atlanta"},
					         {name: "California"},
					         {name: "Dallas"},
					         ]
				},
				{
					name: "Pakistan",
					cities: [
					         {name: "Karachi"},
					         {name: "Lahore"},
					         {name: "Peshawar"},
					         ]
				}
				];
					
				$scope.countries = countries;
			});

Step 2 : Create the view

index.html

<!DOCTYPE html>
<html>
<head>
<title>AngularJS ng-repeat Demo</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script
	src="model.js"></script>
</head>
<body ng-app="countryModule">
	<div ng-controller="countryControleer">
	<p>Country and Corresponding City</p>
		<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>

Output:

AngulaJS Scope





References :- AngulaJS Documentation



Related Articles

  1. Maven Overview




comments powered by Disqus