Mastering ng-repeat in AngularJS: A Beginner’s Guide to Looping Through Data

When working with AngularJS, one of the most powerful and commonly used directives is ng-repeat. It allows you to seamlessly loop through arrays or objects and dynamically generate HTML content based on your data. Whether you’re building a list of items, rendering tables, or displaying dynamic content, mastering ng-repeat is essential for efficient AngularJS development.

In this guide, we’ll explore how to implement ng-repeat effectively, explain its syntax, showcase practical examples, and provide tips for optimizing your code.

---

What is ng-repeat?

ng-repeat is an AngularJS directive used to iterate over a collection such as an array or object and repeat an HTML element for each item in that collection. It’s similar to a for loop in JavaScript but designed specifically for HTML templates, helping to keep your views reactive and clean.

Basic Syntax

• item refers to the current element in the loop.
• items is the array or object you are iterating over.

---

Step-by-Step Guide to Using ng-repeat

1. Prepare Your AngularJS App and Controller

Before using ng-repeat, set up your AngularJS application and controller with a scope variable containing the data you want to loop through.

javascript
var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {
$scope.fruits = [‘Apple’, ‘Banana’, ‘Cherry’, ‘Date’];
});

2. Implement ng-repeat in HTML

Next, use ng-repeat inside the HTML element where you want to render the list. For example, to display a list of fruits:

This will output:

• Apple
• Banana
• Cherry
• Date

3. Looping Through Arrays of Objects

Often, you will have to loop through arrays of objects rather than simple lists. For instance:

javascript
$scope.people = [
{name: ‘John’, age: 25},
{name: ‘Jane’, age: 28},
{name: ‘Paul’, age: 30}
];

Display their information using ng-repeat:

4. Using track by for Performance Optimization

When dealing with large lists, AngularJS can optimize DOM elements by tracking them uniquely. Use the track by clause to improve performance.

{{ person.name }}

This helps AngularJS identify items uniquely and avoid unnecessary DOM manipulations.

---

Tips for Using ng-repeat Efficiently

• Avoid modifying the array inside ng-repeat: It can cause unpredictable behaviors.
• Use track by with unique identifiers to speed up rendering.
• Filter and order data using AngularJS filters for dynamic sorting and searching.
• Combine with ng-if or ng-show for conditional display within repeating elements.

---

Wrapping Up

Using ng-repeat is an essential skill for AngularJS developers looking to dynamically render lists and collections in a clean, maintainable way. By following this guide, you should be able to implement loops in your AngularJS applications easily and optimize your UI rendering for performance.

Remember, the key is to keep your data organized and your views simple. Happy coding!