CodesJava

Easy learning with example program codes

Angularjs get table row index example


Angularjs get table row index:

The $index object is used to get table row index. Initial value of $index is 0.

Syntax:

{{$index}}

Example explanation:

The ng-app directive initializes the application. We create a students object which is initialized by ng-init directive using JSON syntax. The ng-repeat directive will work as for-each loop and iterates over students object. The {{$index}} display the table row index.

Example:

<html>   
   <head>
    <title>AngularJS Table Row Index Example</title>    
    <script src=
     "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
    <style>
     table, th , td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
     }
 
     table tr:nth-child(odd) {
      background-color: #f2f2f2;
     }
 
     table tr:nth-child(even) {
      background-color: #ffffff;
     }
    </style>
   </head>
   <body>
      <h1>AngularJS Table Row Index Example.</h1>
 
      <div ng-app = "" 
           ng-init = "students=[{name:'Prabhjot',country:'US'},
                                {name:'Nidhi',country:'Sweden'},
                                {name:'Kapil',country:'India'}]"
                                > 
         <p>Students with country name:</p>
         <table>
              <tr>
                   <th>Sr. No.</th>
                   <th>Name</th>
                   <th>Country</th>
              </tr>
 
              <tr ng-repeat = "student in students">
                 <td>{{ $index + 1 }}</td>
                 <td>{{ student.name }}</td>
                 <td>{{ student.country }}</td>
              </tr>							
         </table>
      </div>      
   </body>
</html>

Try it:

AngularJS Table Row Index Example on jsbin.com
 



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki