Post
Ask Question

Basic Usage of ng-repeat in AngularJs

ng-repeat is an AngularJS directive used to repeat a set of HTML elements based on the items in an array or object. It's commonly used for displaying lists or tables. Here's a detailed guide on how to use ng-repeat effectively.

Basic Usage of ng-repeat

Example. Let's start with a simple example where we use ng-repeat to display a list of items.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>ng-repeat Example</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.items = [
                {name: 'Item 1', description: 'Description 1'},
                {name: 'Item 2', description: 'Description 2'},
                {name: 'Item 3', description: 'Description 3'}
            ];
        });
    </script>
</head>
<body ng-controller="myCtrl">
<div class="container">
    <h2>Items List</h2>
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="item in items">
            <h4>{{ item.name }}</h4>
            <p>{{ item.description }}</p>
        </li>
    </ul>
</div>
</body>
</html>

Explanation

  1. HTML Structure: The HTML document includes the AngularJS library and initializes the AngularJS application with ng-app="myApp".
  2. Controller: The myCtrl controller is defined in the AngularJS application. It attaches a list of items to the $scope.
  3. ng-repeat Directive: The ng-repeat="item in items" directive iterates over the items array and repeats the HTML element for each item.

Advanced Usage of ng-repeat
 

Using ng-repeat with Track By

To improve performance, especially for large lists, you can use track by to track items by a unique identifier.

<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items track by $index">
        <h4>{{ item.name }}</h4>
        <p>{{ item.description }}</p>
    </li>
</ul>

In the above example, $index is used as the unique identifier. You can also use a unique property of the item, such as item.id.

Using ng-repeat with Filters

You can filter the list items dynamically using filters.

<input type="text" ng-model="searchText" placeholder="Search items" class="form-control">
<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items | filter:searchText">
        <h4>{{ item.name }}</h4>
        <p>{{ item.description }}</p>
    </li>
</ul>

ng-repeat is an AngularJS directive used to repeat a set of HTML elements based on the items in an array or object. It's commonly used for displaying lists or tables. Here's a detailed guide on how to use ng-repeat effectively.

Basic Usage of ng-repeat

Example. Let's start with a simple example where we use ng-repeat to display a list of items.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>ng-repeat Example</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.items = [
                {name: 'Item 1', description: 'Description 1'},
                {name: 'Item 2', description: 'Description 2'},
                {name: 'Item 3', description: 'Description 3'}
            ];
        });
    </script>
</head>
<body ng-controller="myCtrl">
<div class="container">
    <h2>Items List</h2>
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="item in items">
            <h4>{{ item.name }}</h4>
            <p>{{ item.description }}</p>
        </li>
    </ul>
</div>
</body>
</html>

Explanation

  1. HTML Structure: The HTML document includes the AngularJS library and initializes the AngularJS application with ng-app="myApp".
  2. Controller: The myCtrl controller is defined in the AngularJS application. It attaches a list of items to the $scope.
  3. ng-repeat Directive: The ng-repeat="item in items" directive iterates over the items array and repeats the HTML element for each item.

Advanced Usage of ng-repeat
 

Using ng-repeat with Track By

To improve performance, especially for large lists, you can use track by to track items by a unique identifier.

<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items track by $index">
        <h4>{{ item.name }}</h4>
        <p>{{ item.description }}</p>
    </li>
</ul>

In the above example, $index is used as the unique identifier. You can also use a unique property of the item, such as item.id.

Using ng-repeat with Filters

You can filter the list items dynamically using filters.

<input type="text" ng-model="searchText" placeholder="Search items" class="form-control">
<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items | filter:searchText">
        <h4>{{ item.name }}</h4>
        <p>{{ item.description }}</p>
    </li>
</ul>

In this example, the list is filtered based on the searchText input. Only items matching the search text will be displayed.

Using ng-repeat with Grouping

You can group items using ng-repeat and AngularJS filters.

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.items = [
            {name: 'Item 1', category: 'A', description: 'Description 1'},
            {name: 'Item 2', category: 'B', description: 'Description 2'},
            {name: 'Item 3', category: 'A', description: 'Description 3'},
            {name: 'Item 4', category: 'B', description: 'Description 4'}
        ];
    });
</script>
<div class="container" ng-controller="myCtrl">
    <h2>Items List</h2>
    <div ng-repeat="(key, value) in items | groupBy: 'category'">
        <h3>Category {{ key }}</h3>
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="item in value">
                <h4>{{ item.name }}</h4>
                <p>{{ item.description }}</p>
            </li>
        </ul>
    </div>
</div>

Explanation

  1. Grouping: The items array is grouped by the category property.
  2. ng-repeat with Grouping: The outer ng-repeat iterates over each group, and the inner ng-repeat iterates over the items in each group.

Conclusion

The ng-repeat directive is a powerful tool in AngularJS for iterating over arrays and objects to generate HTML dynamically. By understanding its basic and advanced usage, you can create dynamic, responsive, and performant applications.

These examples and explanations should help you understand and utilize ng-repeat effectively in your AngularJS applications.


Similar Articles