AngularJS ng-Repeat Directive

The AngularJS ng-repeat directive is used to loop through a collection and creates new template for each item. Each item in the collection is given its own template and scope.

AngularJS ng-Repeat Properties

Property	Description
$index	iterator offset of the repeated element (0..length-1).
$first	true if the repeated element is first in the iterator
$middle	true if the repeated element is between the first and last in the iterator
$last	true if the repeated element is last in the iterator.
$even	true if the iterator position $index is even (otherwise false).
$odd	true if the iterator position $index is odd (otherwise false).

Syntax

<input type="text" ng-readonly="checked">

AngularJS ng-Repeat Directive Example

<html>
<head>
<title>My first AngularJS ng-repeat Directive code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
function appController($scope) {
    $scope.students = [
  {firstName:'Jimi', lastName:'Scotts', email:'jimi@xyz.com'},
  {firstName:'Paul', lastName:'Adam', email:'paul.a@xyz.com'},
  {firstName:'Peter', lastName:'England', email:'peter@xyz.com'},
  {firstName:'Rechard', lastName:'Jeff', email:'reachardjeff@xyz.com'}
];
}
</Script>
</head>
<body>
<div ng-app ng-controller="appController">
<ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="student in students">
      {{$index + 1}}. First Name <strong>{{student.firstName}} </strong>
	  Last Name <strong>{{student.lastName}}</strong> Email <strong>{{student.email}}</strong>.
    </li>
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>
</body>
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Repeat Directive

AngularJS ng-Repeat Properties

AngularJS ng-Repeat Directive Example

Recent Articles