Description :
We have an array named students with the name of the students $scope.students = [{ name: 'John' }, { name: 'Smith' }, { name: 'Allen' }, { name: ' Johnson' }, { name: 'Harris' }, { name: ' Williams' }, { name: 'David' }]; The ng-repeat directives is same as for loop, Here is how we use ng-repeat ng-repeat="student in students" In this example the ng-repeat directive will print student name one by one in the li tag as the student variable will hold the object from the array one by one and we print the student.name which will display the student name in the list.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<ul>
<li ng-repeat="student in students">{{student.name}}</li>
</ul>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.students = [{ name: 'John' }, { name: 'Smith' }, { name: 'Allen' }, { name: ' Johnson' }, { name: 'Harris' }, { name: ' Williams' }, { name: 'David' }];
}]);
</script>
</body>
</html>
Description :
In this example of ng-repeat directive we have an array of the students with the name of the student,roll number, class and section of the student. with the ng-repeat directive we print the student roll no, name, class and section in the table form. see the output.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<table>
<tr>
<th>Rollno</th>
<th>Name</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr ng-repeat="student in students">
<td>{{student.rollno}}</td>
<td>{{student.name}}</td>
<td>{{student.cls}}</td>
<td>{{student.section}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.students = [{ rollno: '1', name: 'John', cls: '5th', section: 'A' }, { rollno: '6', name: 'Smith', cls: '4th', section: 'D' }, { rollno: '5', name: 'Allen', cls: '6th', section: 'C' }];
}]);
</script>
</body>
</html>
Description :
In this example we bind the numbers array with some duplicate values (2 is two times in the array) with the div tag using ng-repeat directive. As there are duplicate values so we have to track this array by $index. Using the ng-repeat directive we print the index of the array element and value on the index, Use 'track by' expression to specify unique keys. See the output.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div ng-repeat="n in [2,2, 4, 6, 8,10,12] track by $index">
Index - {{$index}} ______________ Value - {{n}}
</div>
</div>
</body>
</html>
Description :
In this example, we have an array of students with id and name of the student. We print the name of the student using ng-repeat directive and we track this array by student id. if there are two or more students with the same id then this ng-repeat directive will display nothing. Let's see the example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<div ng-repeat="student in students track by student.id">
{{student.name}}
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.students = [{ id: '1', name: 'Smith' }, { id: '2', name: 'Allen' }, { id: '3', name: 'David' }, { id: '4', name: 'John' }, { id: '5', name: 'John' }, { id: '6', name: 'John' }];
}]);
</script>
</body>
</html>
Description :
In this example we have a students array with the roll number, name, class and section of the student. By using ng-repeat directive we print the Name of the student and class of the student and orderBy the ng-repeat by class. See the output the student of the 3rd class shows on the first position of the list then student of 4th class and so on. If you want to see the output in descending order then simply prefix minus sign to the 'cls' ( orderBy: '-cls' ) like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<div ng-repeat="model in students | orderBy: 'cls'">
{{model.name}} ------ {{model.cls}}
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.students = [{ rollno: '1', name: 'John', cls: '7th', section: 'A' },
{ rollno: '2', name: 'David', cls: '5th', section: 'A' },
{ rollno: '3', name: 'John', cls: '3th', section: 'C' },
{ rollno: '4', name: 'Willam', cls: '5th', section: 'A' },
{ rollno: '5', name: 'Smith', cls: '4th', section: 'D' },
{ rollno: '6', name: 'Allen', cls: '6th', section: 'C' }];
}]);
</script>
</body>
</html>
Description :
In this example we have an array named thumbnails with the id and name. With the help of ng-repeat directive we print the id and name of the thumbnail. We can also display the pictures instead of name of the thumbnail.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<div ng-repeat="thumbnail in thumbnails" style="height:200px;width:200px;border:2px solid black;float:left;margin-right:20px">
{{thumbnail.id}}
<h3 style="text-align:center;vertical-align:central">{{thumbnail.name}}</h3>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$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 about special start and end points of the ng-repeat directive.This is used to extend the scope of the repeated data. In this example we have an array named items with the head, body and footer content. We display the head in the header container and use ng-repeat-start in this div and body in the next div tag and then in the next div use ng-repeat-end. After the ng-repeat-end we can not access the repeated data.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<header ng-repeat-start="item in items" style="height:50px;width:300px;border:2px solid black;background-color:#13934d;color:white">
<h2 style="text-align:center">{{ item.head }}</h2>
</header>
<div class="body" style="height: 150px; width: 300px; border: 2px solid black; text-align: center">
<p>{{ item.body }}</p>
</div>
<div ng-repeat-end>
<br />
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.items = [
{ head: 'HTML', body: 'Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages', footer: '' },
{ head: 'JavaScript', body: 'JavaScript is a powerful scripting program that adds interactivity to web pages.',Footer:'' },
{ head: 'JQuery', body: 'jQuery is a JavaScript library that allows web developers to add extra functionality to their websites.', footer: 'Footer for Slide 3' },
{ head: 'AngularJS', body: 'In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.', footer: 'Footer for Slide 4' },
];
}]);
</script>
</body>
</html>
Description :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="myController">
<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="emp in employees | orderBy:'-name'">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.employees = [
{ name: "John", age: "30" },
{ name: "Smith", age: '28' },
{ name: "Jennifer", age: '19' },
{ name: "David", age: '20' },
{ name: "Allen", age: '20' },
{ name: "Marry", age: '20' },
];
}]);
</script>
</body>
</html>
Description :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="myController">
<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="emp in employees | limitTo:3">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.employees = [
{ name: "John", age: "30" },
{ name: "Smith", age: '28' },
{ name: "Jennifer", age: '19' },
{ name: "David", age: '20' },
{ name: "Allen", age: '20' },
{ name: "Marry", age: '20' },
];
}]);
</script>
</body>
</html>