[email protected]      beta
Donate

AngularJs ng-repeat directives

Overview: Understanding ng-repeat directive, Use of AngularJS ng-repeat directives with an example, ng-repeat directive used to loop through items in the collection of an element.

What is ng-repeat directives?

In AngularJs the ng-repeat directive is used to loop through items in the collection of an element (DOM). The ng-repeat directive allows to iterate over a collection of data and print out DOM nodes that respond to that data. .i.e is similar to for loop.

Iterating with the ng-repeat Directive


Example 1: AngularJS ng-repeat directive with Plain Array.

Here in this example first we initialize array variable names using ng-init, with some data .i.e (User Names). Now using ng-repeat directive will display each username from that array list data.

Our code looks like as written below.

<div ng-app ng-init="names=['Amit sarna','Satinder singh','Sagar gada','Leslie mac','Andrea ely']">
    <ul>
        <li ng-repeat='x in names'>{{ x }}</li>        
    </ul>
</div>    

Try is yourself

Output:

ng-repeat display name from array example output

Display names from an array list.


Example 2: AngularJs ng-repeat directive with Array Of Objects

In the above example, we use ng-repeat with simple array and display username. Now here we are going to learn how to display data from Array of Object using ng-repeat directive.

First, we have to initialize a variable mobileDetails which holds data ( array of object ) using ng-init same as the previous example.

As you can see from following code that our data is about Mobile Name and its price, so will display it in tabular format .i.e column as mobile name, price. The final code looks like as written below.

<div ng-app ng-init="mobileDetails=[{name:'iPhone 7' , price:'2000'},{name:'Moto G 5' , price:'800'},{name:'Galaxy S 8' , price:'1500'}]">
<table border="1">
        <tr><th>Model Name</th><th>Price</th></tr>
        <tr ng-repeat="item in mobileDetails">
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>    
        </tr>
    </table>
</div> 

Try is yourself

Output:

ng-repeat display data from array of object example output

Display mobile data from an array of object.


Good Practise: The Same example we will write using ng-controller.

As we said earlier using ng-init is not good practice, we should use ng-controller for any complex task. Here we add attribute ng-controller to our div and initialize mobileDetails variable inside our controller myCtrl. The final code looks like as written below.

<div ng-app="myApp" ng-controller="myCtrl" >
<table border="1">
        <tr><th>Model Name</th><th>Price</th></tr>
        <tr ng-repeat="item in mobileDetails">
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>    
        </tr>
    </table>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

    $scope.mobileDetails = [
       {
            "name" : "iPhone 7",
            "price" : "2000"
        },{
            "name" : "Moto G 5",
            "price" : "800"
        },{
            "name" : "'Galaxy S 8",
            "price" : "1500"
        }
    ]
});
</script> 

Try is yourself


Other Referrence

  1. How to use nested ng-repeat with complex JSON Data
  2. Using ng-repeat Bind JSON data to HTML table in AngularJS

  Popular Tag
  Recent Posts
  Follow Us
If you find these tutorials helpful then please donate. It will lead me to do more tutorials.
Donate