Angularjs table tutorial

by

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.

Example:

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

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.

Example:

<html>   
   <head>
    <title>AngularJS Table 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 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>Name</th>
                   <th>Country</th>
              </tr>
 
              <tr ng-repeat = "student in students">
                 <td>{{ student.name }}</td>
                 <td>{{ student.country }}</td>
              </tr>							
         </table>
      </div>      
   </body>
</html>

Try it:

AngularJS Table Example on jsbin.com