In this tutorial, we will be exploring how to use the ng-repeat directive in AngularJS. The ng-repeat directive is used to iterate over a collection of items in AngularJS and generate HTML for each item in the collection. This is a powerful feature in AngularJS that allows you to dynamically generate lists, tables, and other UI elements based on the data in your application.
To follow along with this tutorial, you will need to have a basic understanding of AngularJS and how to set up a simple AngularJS application. If you are new to AngularJS, I recommend checking out some introductory tutorials before diving into this one.
Let’s get started by setting up a basic AngularJS application in an HTML file. Create a new file called index.html and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS ng-repeat Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in items">
<p>{{ item }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
});
</script>
</body>
</html>In this code, we have defined an AngularJS module called ‘myApp’ and a controller called ‘myController’. We have also defined a scope variable called ‘items’ that contains an array of items. Inside the ng-repeat directive, we are iterating over the items array and displaying each item in a paragraph tag.
When you open the index.html file in a browser, you should see a list of items displayed on the page.
Now, let’s explore some advanced features of the ng-repeat directive. You can also use ng-repeat with key-value pairs in objects. Modify the items array in the controller to contain key-value pairs like this:
$scope.items = [
{name: 'Item 1', count: 1},
{name: 'Item 2', count: 2},
{name: 'Item 3', count: 3}
];And modify the ng-repeat directive in the HTML file to display both the name and count of each item like this:
<div ng-repeat="item in items">
<p>Name: {{ item.name }}, Count: {{ item.count }}</p>
</div>When you refresh the page in the browser, you should see a list of items with their names and counts displayed on the page.
Furthermore, you can also use filters with ng-repeat to filter the items based on certain criteria. Add an input field to your HTML file and bind it to a search query variable in the controller like this:
<input type="text" ng-model="searchQuery">And modify the ng-repeat directive with a filter like this:
<div ng-repeat="item in items | filter:searchQuery">
<p>{{ item }}</p>
</div>Now, when you type in the input field, the list of items will be filtered based on the search query you enter.
In conclusion, the ng-repeat directive in AngularJS is a powerful tool that allows you to dynamically generate HTML elements based on the data in your application. By following this tutorial and experimenting with different features of ng-repeat, you can create dynamic and interactive UI elements in your AngularJS applications.
