EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJs ng-repeat

AngularJs ng-repeat

Updated April 3, 2023

AngularJs ng-repeat

Introduction to AngularJs ng-repeat

AngularJS ng-repeat is an In-Built AngularJS directive that is basically used in the HTML view to loop through the list of contents on UI and utilize or display any particular object or all objects of each element of the list in HTML page along with styling in any ANGULARJS application. The ng-repeat attribute can be used along with any Element Tag such as div, paragraph, href, etc. of Html.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

How Angular CLI works?

In the AngularJS framework, it is very important to know that all the In-Built directives that the AngularJS framework has provisioned will always be denoted with ng. As soon as you declare the ng-repeat directive attribute in the HTML page of your AngularJS application, the Framework knows what has to be done as it’s inbuilt the definition is defined with AngularJS framework itself. Each time ng-repeat is invoked, it initializes a template for each object from the list/collection, and each template element has its own scope.

Each object can be referred to using the local variable defined in the ng-repeat tag. The ng-repeat should be used as an attribute inside any HTML tag such as div, paragraph, table, button, href, etc. To know the index of each object in the list and keep track of it, the track by $index property can be used. Tracking by some other id parameter (not $index) which is present inside the object can also be done using track by eachObject.id. Along with $index, there are few more such properties defined by AngularJS which can be used with ng-repeat, such as

  • $first – Will return true if the object is the first object in the List
  • $last – Will return true if the object is the Last object in the List
  • $middle – Will return true if the object is in between the List
  • $odd – If the value of $index is an odd number, it will return true
  • $even – If the value of $index is an even number, it will return true

ng-init can also be used along with the ng-repeat directive, which can help you to add an additional parameter for each object in the list ONLY for that scope of the template instance.

While using ng-repeat, something to keep a note of is that any object starting with the $ symbol will not be read by the ng-repeat directive and get ignored as its AngularJS and $ is a prefix used by AngularJS for public or private properties.

Example:

Index.html

<html ng-app="myGroceryApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
<style>
.grocery-list-class {
margin-top: 20px;
cursor: pointer;
}
.name {
font-weight: bold;
}
.amt, .qunatity, .desc {
font-weight: normal;
}
.amt {
text-align:right;
vertical-align: centre;
color:blue;
}
h1 {
text-align:center;
color: orange;
}
</style>
</head>
<body>
<div ng-controller='GroceriesController'>
<h1>Your Cart is Ready !!</h1>
<div class="grocery-list-class" ng-repeat="grocery in groceriesList track by $index" ng-init="quantity = 1" ng-click="viewEachGrocery(grocery)">
<div class="each-list-style">
<div class="name">{{grocery.name}}</div>
<div class="desc">{{grocery.description}}</div>
<div class="qunatity">Quantity : {{quantity}}</div>
<div class="amt"> {{grocery.amount}}</div>
<hr>
</div>
</div>
</div>
</body>
</html>

Script.js

angular.module('myGroceryApp', [])
.controller('GroceriesController', function($scope) {
$scope.groceriesList = [];
var grocery1 = {"name": "Olive Oil", "description": "The description of this oil",
"amount": 154.50};
var grocery2 = {"name": "Whole Wheat Bread", "description": "The description of this Bread",
"amount": 35};
var grocery3 = {"name": "Tomato Suace", "description": "The description of this Sauce",
"amount": 50};
var grocery4 = {"name": "Brown Rice", "description": "The description of this Rice",
"amount": 200};
var grocery5 = {"name": "Rose Water", "description": "The description of this Product",
"amount": 55.75};
$scope.groceriesList.push(grocery1, grocery2, grocery3, grocery4, grocery5);
});

In the above example, we are trying to display a list of groceries that have been added to the cart in tabular format on UI using the ng-repeat directive.

Make sure to include the AngularJS dependency in the Script tag so that you will be able to use the ng-repeat directive of AngularJS.

ng-repeat="grocery in groceriesList track by $index"

Here grocery is each object inside the groceries list, which is a list of all groceries in the cart. We have used a track by $index to keep track of each grocery inside the groceries list

ng-init="quantity = 1"

ng-init can be used to add any new parameter inside each grocery, and here we have added quantity to default to 1 for each grocery in the grocery list

ng-click="viewEachGrocery(grocery)"

This directive can be used when you need to view each grocery detail in the grocery list. Function viewEachGrocery takes grocery as the parameter, which is each object of the grocery list.

Also, if we need to use the filter for filtering elements based on the amount or any other parameter, the filter can be used along with the ng-repeat directive and easily filter out the elements.

Just by using a few simple and easy CSS styling, we will be able to arrange the cart properly and view the contents on UI just like we want to below the output of the above code.

AngularJs ng-repeat output

Conclusion

The ng-repeat directive in AngularJS is a very useful and one of the most widely used In-Built AngularJS directives, which are used to iterate through a list of elements and display the objects on the UI along with CSS styling, tracking by index and comes with a very little piece of code and easy to use and understand. Knowing the syntax is all that is needed, and you are ready to go. Filters can also be used with this ng-repeat directive to make it more efficient.

Recommended Articles

We hope that this EDUCBA information on “AngularJs ng-repeat” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. AngularJS Currency Filter
  2. Installing Angular
  3. AngularJS Filters
  4. Angular 2 Architecture
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
2000+ Hours of HD Videos
43 Learning Paths
550+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
2000+ Hour of HD Videos
80 Learning Paths
400+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
5000+ Hours of HD Videos
149 Learning Paths
1050+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle5000+ Hours of HD Videos | 149 Learning Paths | 1050+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program2000+ Hours of HD Videos | 43 Learning Paths | 550+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more