How to display index number in AngularJS ng-repeat


If you are using AngularJS ng-repeat to iterate over a list of items and you want to display index number with every item then you can use $index variable.

AngularJS

(function () {
   'use strict';

   angular
      .module('app', [])
      .controller('DemoController', DemoController);

      function DemoController (){
         var vm = this;
         vm.items = ["Green", "Blue", "Red", "Black", "White"];
      }
})();

HTML

<!DOCTYPE html>
<html lang="en-US">
<body ng-app="app">

    <div ng-controller="DemoController as vm">
        <div ng-repeat="item in vm.items">
            <span>{{$index}} - {{item}}</span>
        </div>
    </div>

    <script src="angular.min.js"></script>
    <script src="app.js"></script>

</body>
</html>

Output

0 - Green
1 - Blue
2 - Red
3 - Black
4 - White

 

About author


User avatar

Waqas Anwar

Founder of EzzyLearning.com, Senior Consultant, Microsoft .NET and Web Technologies

Comments