Angularjs Ng Repeat Directive With Example

Code Explanation:

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. The array of TopicsNames is then added to a member variable called “topics” and attached to our scope object. We are using the HTML tags of

(Unordered List) and
• (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. 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 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.

  Code Explanation:

  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”. 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:

  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.