Easy learning with example program codes

Angularjs table tutorial

AngularJS table:

Orderly arrangement of quantitative data in columns and rows is known as table. In AngularJS ng-repeat directive is used for displaying tables. Let us have a brief look at ng-repeat directive.

ng-repeat directive:

The ng-repeat directive is used to repeats html elements for each item in a collection.


<div ng-app = "">
   <p>List of students with country name:</p>
      <li ng-repeat = "student in students">
         {{ Name: ' + + ', Country: ' + }}

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.


    <title>AngularJS Table Example</title>    
    <script src=
     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;
      <h1>AngularJS Table Example.</h1>
      <div ng-app = "" 
           ng-init = "students=[{name:'Prabhjot',country:'US'},
         <p>Students with country name:</p>
              <tr ng-repeat = "student in students">
                 <td>{{ }}</td>
                 <td>{{ }}</td>

Try it:

AngularJS Table Example on

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


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

Copyright © 2019 CodesJava Protection Status SiteMap Reference: Java Wiki