AngularJS ng-repeat Directive with Example

ng-repeat Directive in AngularJS

The ng-repeat directive in AngularJS is used to display repeating values defined in the controller. Sometimes we require displaying a list of items in the view. The ng-repeat directive helps us display a list of items defined in the controller to a view page.

AngularJS ng-repeat Directive Example

Let’s look an example of ng-repeat directive in AngularJS:

AngularJS ng-repeat Directive Example

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
		{{tpname.name}}
		</li></ul>
</div>

<script> 
	var app = angular.module('DemoApp',[]);
	app.controller('DemoController', function($scope){

	$scope.TopicNames =[
		{name: "What controller do from Angular's perspective"},
		{name: "Controller Methods"},
		{name: "Building a basic controller"}];	
		});
</script>

</body>
</html>

Code Explanation:

  1. In the controller, we first define our array of list items which we want to define in the view. Over here we have defined an array called “TopicNames” which contains three items. Each item consists of a name-value pair.
  2. The array of TopicsNames is then added to a member variable called “topics” and attached to our scope object.
  3. We are using the HTML tags of <ul>(Unordered List) and <li>(List Item) to display the list of items in our array. We then use the ng-repeat directive for going through each and every item in our array. The word “tpname” is a variable which is used to point to each item in the array topics.TopicNames.
  4. In this, we will display the value of each array item.

If the code is executed successfully, the following Output will be shown when you run your code in the browser. You will see all items of the array (Basically the TopicNames in topics) displayed.

Output:

AngularJS ng-repeat Directive Example

AngularJS Multiple Controllers

An advanced controller example would be the concept of having multiple controllers in an angular JS application.

You might want to define multiple controllers to separate different business logic functions. Earlier we mentioned about having different methods in a controller in which one method had separate functionality for addition and subtraction of numbers. Well, you can have multiple controllers to have a more advanced separation of logic. For example, you can have one controller which does just operations on numbers and the other which does operations on strings.

Let’s look at an example of how we can define multiple controllers in an angular.JS application.

How to define multiple controllers in AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp">
	<div ng-controller="firstcontroller">
		<div ng-controller="secondcontroller">
		{{lname}}
		</div>
	</div>
</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('firstcontroller', function($scope){
		$scope.pname="firstcontroller";
			});
		app.controller('secondcontroller', function($scope){
			$scope.lname="secondcontroller";
			});
</script>
</body>
</html>

Code Explanation:

  1. Here we are defining 2 controllers called “firstController” and “secondController”. For each controller we are also adding some code for processing. In our firstController , we attach a variable called “pname” which has the value “firstController”, and in the secondController we attach a variable called “lname” which has the value “secondController”.
  2. In the view, we are accessing both controllers and using the member variable from the second controller.

If the code is executed successfully, the following Output will be shown when you run your code in the browser. You will see all text of “secondController” as expected.

Output:

How to define multiple controllers in AngularJS

Summary:

  • The ng-repeat directive in AngularJS is used to display multiple repeating items.
  • We also had a look at an advanced controller which looked at the definition of multiple controllers in an application.