AngularJS ng-repeat directive with Example | AngularJS ng-repeat Directive with Example

AngularJS ng-repeat directive with Example | AngularJS ng-repeat Directive with Example

AngularJS ng-Repeat – We have associate degree array named students with the name of the scholars $scope.students = [{ name: 'Aaban' }, { name: 'Abasalom' }, { name: 'Adon' }, { name: ' Allen' }, { name: 'joe' }, { name: ' Williams' }, { name: 'woo' }]; The ng-repeat directives is same as for loop, Here is however we have a tendency to use ng-repeat ng-repeat=”student in students” during this example the AngularJS ng-repeat directive can print student name one by one within the li tag because the student variable can hold the thing from the array one by one and that we print the scholar.name which can show the scholar name within the list.

AngularJS ng-Repeat Definition and Usage with Example

The ng-repeat directive repeats a group of HTML, a given variety of times.

The set of HTML are going to be continual once per item in an exceedingly assortment.

The collection should be associate degree array or associate degree object.

Note: every instance of the repetition is given its own scope, that contains this item.

If you’ve got associate degree assortment of objects, the ng-repeat directive is ideal for creating a HTML table, displaying one table row for every object, and one table knowledge for every object property.

AngularJS ng-Repeat Example – 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="studentApp">
    <div ng-controller="ngRepeatController">
        <ul>
            <li ng-repeat="student in students">{{student.name}}</li>
        </ul>
    </div>
<script>
    var studentApp = angular.module("studentApp", []);
    studentApp.controller('ngRepeatController', ['$scope', function ($scope) {
        $scope.students = [{ name: 'Aaban' }, { name: 'Abasalom' }, { name: 'Adon' }, { name: ' Allen' }, { name: 'joe' }, { name: ' Williams' }, { name: 'woo' }];
    }]);
</script>
</body>
</html>

Description :

In this example of ng-repeat directive we’ve associate degree array of the scholars with the name of the scholar,roll variety, category and section of the scholar. with the ng-repeat directive we have a tendency to print the scholar roll no, name, category and section within the table kind. see the output.

AngularJS ng-Repeat Example – 2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularJS ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="studentApp">
    <div ng-controller="ngRepeatController">
        <table>
            <tr>
                <th>Rollno</th>
                <th>Name</th>
                <th>Class</th>
                <th>Section</th>
            </tr>
            <tr ng-repeat="studentVal in students">
                <td>{{studentVal.rollno}}</td>
                <td>{{studentVal.name}}</td>
                <td>{{studentVal.cls}}</td>
                <td>{{studentVal.section}}</td>
            </tr>
        </table>
    </div>
<script>
    var studentApp = angular.module("studentApp", []);
    studentApp.controller('ngRepeatController', ['$scope', function ($scope) {
        $scope.students = [{ rollno: '2', name: 'Aaban', cls: '2th', section: 'B' }, { rollno: '4', name: 'Abasalom', cls: '5th', section: 'C' }, { rollno: '7', name: 'Adon', cls: '4th', section: 'A' }];
    }]);
</script>
</body>
</html>

Description :

In this example we have a tendency to bind the numbers array with some duplicate values (2 is 2 times within the array) with the div tag victimization ng-repeat directive. As there square measure duplicate values thus we’ve to trace this array by $index. victimization the ng-repeat directive we have a tendency to print the index of the array component and price on the index, Use ‘track by’ expression to specify distinctive keys. See the output.

AngularJS ng-Repeat Example – 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <div ng-repeat="nVal in [2,2, 4, 6, 8,10,12] track by $index">
            Index - {{$index}} ______________ Value - {{nVal}}
        </div>
    </div>
</body>
</html>

Description :

In this example, we’ve an array of scholars with id and name of the coed. we have a tendency to print the name of the coed exploitation ng-repeat directive and that we track this array by student id. if there ar 2 or a lot of students with constant id then this ng-repeat directive can show nothing. let’s examine the example:

AngularJS ng-Repeat Example – 4

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="employeesApp">
    <div ng-controller="ngRepeatController">
        <div ng-repeat="studentVal in students track by studentVal.id">
            {{studentVal.name}}
        </div>
    </div>
<script>
    var employeesApp = angular.module("employeesApp", []);
    employeesApp.controller('ngRepeatController', ['$scope', function ($scope) {
        $scope.students = [{ id: '1', name: 'Abasalom' }, { id: '2', name: 'Adon' }, { id: '3', name: 'woo' }, { id: '4', name: 'Aaban' }, { id: '5', name: 'Aaban' }, { id: '6', name: 'Aaban' }];
    }]);
</script>
</body>
</html>

Description :

In this example we’ve a students array with the roll range, name, category and section of the coed. By exploitation ng-repeat directive we have a tendency to print the Name of the coed and class of the coed and orderBy the ng-repeat by class. See the output the coed of the third category shows on the primary position of the list then student of fourth category and then on. If you wish to envision the output in raining order then merely prefix sign to the 'cls' ( orderBy: '-cls' ) like this.

AngularJS ng-Repeat Example – 5

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angularjs ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="employeesApp">
    <div ng-controller="ngRepeatController">
        <div ng-repeat="modelVal in students | orderBy: 'cls'">
            {{modelVal.name}}   ------   {{modelVal.cls}}
        </div>
    </div>
<script>
    var employeesApp = angular.module("employeesApp", []);
    employeesApp.controller('ngRepeatController', ['$scope', function ($scope) {
        $scope.students = [{ rollno: '1', name: 'Aaban', cls: '7th', section: 'A' },
            { rollno: '5', name: 'woo', cls: '2th', section: 'B' },
            { rollno: '4', name: 'Aaban', cls: '6th', section: 'D' },
            { rollno: '9', name: 'Willam', cls: '4th', section: 'C' },
            { rollno: '7', name: 'Abasalom', cls: '3th', section: 'B' },
            { rollno: '3', name: 'Adon', cls: '5th', section: 'A' }];
    }]);
</script>
</body>
</html>

Description :

In this example we’ve an array named thumbnails with the id and name. With the assistance of ng-repeat directive we have a tendency to print the id and name of the fingernail. we will conjointly show the photographs rather than name of the fingernail.

AngularJS ng-Repeat Example – 6

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angularjs ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="employeesApp">
    <div ng-controller="ngRepeatController">
        <div ng-repeat="thumbnailVal in thumbnails" style="height:200px;width:200px;border:2px solid black;float:left;margin-right:20px">
            {{thumbnailVal.id}}
            <h3 style="text-align:center;vertical-align:central">{{thumbnailVal.name}}</h3>
        </div>
    </div>
<script>
    var employeesApp = angular.module("employeesApp", []);
    employeesApp.controller('ngRepeatController', ['$scope', function ($scope) {
        $scope.thumbnails = [{ id: '1', name: 'Div1' }, { id: '2', name: 'Div2' }, { id: '3', name: 'Div3' }, { id: '4', name: 'Div4' }];
    }]);
</script>
</body>
</html>

Description :

This example is regarding special begin and finish points of the ng-repeat directive.This is wont to extend the scope of the continual knowledge. during this example we’ve an array named things with the pinnacle, body and footer content. we have a tendency to show the pinnacle within the header instrumentation and use ng-repeat-start during this div and body within the next div tag so within the next div use ng-repeat-end. once the ng-repeat-end we will not access the continual knowledge.

AngularJS ng-Repeat Example – 7

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angularjs ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="employeesApp">
    <div ng-controller="ngRepeatController">
        <header ng-repeat-start="itemVal in items" style="height:50px;width:300px;border:2px solid black;background-color:#13934d;color:white">
            <h2 style="text-align:center">{{ itemVal.head }}</h2>
        </header>
        <div class="body" style="height: 150px; width: 300px; border: 2px solid black; text-align: center">
            <p>{{ itemVal.body }}</p>
        </div>
        <div ng-repeat-end>
            <br />
        </div>
    </div>
<script>
    var employeesApp = angular.module("employeesApp", []);
    employeesApp.controller('ngRepeatController', ['$scope', function ($scope) {

        $scope.items = [

            { head: 'HTML', body: 'HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages.', footer: '' },
            { head: 'JavaScript', body: 'JavaScript is the programming language of HTML and the Web. JavaScript is easy to learn.',Footer:'' },
            { head: 'JQuery', body: 'jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation.', footer: 'Footer for Slide 3' },
            { head: 'AngularJS', body: 'AngularJS is what HTML would have been, had it been designed for building web-apps.', footer: 'Footer for Slide 4' },

        ];
    }]);
</script>
</body>
</html>

AngularJS ng-Repeat Example – 8

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://www.onlinecode/example/faqs/css/bootstrap.min.css">
</head>
<body ng-app="employeesApp">
    <div ng-controller="employController">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-striped table-bordered table-hover">
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                        </tr>
                        <tr ng-repeat="empanme in employees | orderBy:'-name'">
                            <td>{{empanme.name}}</td>
                            <td>{{empanme.age}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
<script>
    var employeesApp = angular.module("employeesApp", []);
    employeesApp.controller('employController', ['$scope', function ($scope) {
        $scope.employees = [
            { name: "Aaban", age: "25" },
            { name: "Abasalom", age: '26' },
            { name: "Jennifer", age: '21' },
            { name: "woo", age: '15' },
            { name: "Adon", age: '19' },
            { name: "Marry", age: '22' },
        ];
    }]);
</script>
</body>
</html>

AngularJS ng-Repeat Example – 9

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular ng-Repeat with Example - onlinecode</title>
    <script src="http://www.onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://www.onlinecode/example/faqs/css/bootstrap.min.css">
</head>
<body ng-app="employeesApp">
    <div ng-controller="employController">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-striped table-bordered table-hover">
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                        </tr>
                        <tr ng-repeat="empanme in employees | limitTo:3">
                            <td>{{empanme.name}}</td>
                            <td>{{empanme.age}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
<script>
    var employeesApp = angular.module("employeesApp", []);
    employeesApp.controller('employController', ['$scope', function ($scope) {
        $scope.employees = [
            { name: "Aaban", age: "25" },
            { name: "Abasalom", age: '22' },
            { name: "Jennifer", age: '25' },
            { name: "woo", age: '18' },
            { name: "Adon", age: '21' },
            { name: "Marry", age: '25' },
        ];
    }]);
</script>
</body>
</html>

You also like Angularjs Moment Picker AND Angularjs Ng-Bind with Example AND AngularJS ng-class with Example

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  17  =  21

We accept paid advance and paid guest Posting on our Site : Contact US