EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJs ng-repeat
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJs ng-repeat

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.

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,502 ratings)

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 – AngularJs ng-repeat

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

This is a guide to AngularJs ng-repeat. Here we discuss How Angular CLI works and Examples of AngularJs ng-repeat along with the code and output. You may also have a look at the following articles to learn more –

  1. AngularJS Currency Filter
  2. Installing Angular
  3. AngularJS Filters
  4. Angular 2 Architecture
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • 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

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

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

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

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

EDUCBA Login

Forgot Password?

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

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

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

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

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

Let’s Get Started

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