Angularjs Examples

AJS Examples


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

PropertyDescription
$indexiterator offset of the repeated element (0..length-1).
$firsttrue if the repeated element is first in the iterator
$middletrue if the repeated element is between the first and last in the iterator
$lasttrue if the repeated element is last in the iterator.
$even true if the iterator position $index is even (otherwise false).
$oddtrue 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