AngularJS Tables

Creating tables or grids are one of the most important things to learn in any language. In case of AngularJS the ng-repeat directive is used to display tables, as the table data is usually repeatable in nature.

This directive creates tables quite easily. In AngularJS applications, showing data is one of the most crucial aspects and we do that by using a table containing whatever data we need to show to the users. The following example shows how to use the ng-repeat directive to create a table.

													
 <table>  
    <tr>  
       <th>Name</th>  
       <th>Marks</th>  
   </tr>  
    <tr ng-repeat = "subject in student.subjects">  
       <td>{{ subject.name }}</td>  
       <td>{{ subject.marks }}</td>  
   </tr>  
</table>  

How to style the table and make it look cool?

Moreover, further styling of the table can be done using CSS to make it look nice.

 <style>  
   table, th , td {  
      border: 1px solid grey;  
      border-collapse: collapse;  
      padding: 6px;  
   }  
     
   table tr:nth-child(odd) {  
      background-color: #f2h2f2;  
   }  
  
   table tr:nth-child(even) {  
      background-color: #f22ff;  
   }  
 </style>  

AngularJS Table example with CSS

     
<!DOCTYPE html>  
 <html>  
    <head>  
       <title>Angular JS Table<title>  
       <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>  
       <h2>AngularJS Sample Application</h2>  
       <div ng-app = "mainApp" ng-controller = "studentController">  
          <table border = "0">  
             <tr>  
                <td>Enter first name:</td>  
                <td>input type="text" ng-model="student.firstName"></td>  
            </tr>  
             <tr>  
                <td>Enter last name: </td>  
                <td>  
                   <input type = "text" ng-model = "student.lastName">  
               </td>  
            <tr>  
             <tr>  
                <td>Name: <td>  
                <td>{{student.fullName()}}<td>  
            <tr>  
             <tr>  
                <td>Subject:</td>  
               <td>  
                   <table>  
                      <tr>  
                         <th>Name<th>.  
                         <th>Marks<th>  
                     <tr>  
                      <tr ng-repeat = "subject in student.subjects">  
                         <td>{{ subject.name }}</td>  
                         <td>{{ subject.marks }}</td>  
                     <tr>  
                  <table>  
               <td>  
                      
            <tr>  
         <table>  
           
      <div>  
        
       <script>  
         var mainApp = angular.module("mainApp", []);  
           
         mainApp.controller('studentController', function($scope) {  
            $scope.student = {  
               firstName: "Mithilesh",  
               lastName: "Singh",  
               fees:500,  
                 
               subjects:[  
                  {name:'Physics',marks:100},  
                  {name:'Math',marks:99},  
                  {name:'Chemistry',marks:90}, 
                  {name:'English',marks:99},  
                  {name:'Hindi',marks:91}  
               ],  
                 
               fullName: function() {  
                  var studentObject;  
                  studentObject = $scope.student;  
                  return studentObject.firstName + " " + studentObject.lastName;  
               }  
            };  
         });  
      <script>  
   <body>  
<html>  

How to sort the table and display it in order?

In order to sort the table we have to use the orderBy filter. The following code shows how to use the filter in the AngularJS application-


How to display the table in uppercase?

To display the table in uppercase letters, we can use the uppercase filter. The following code shows how to use the filter in an AngularJS application.


How to display the table index?

The index of the table can be displayed by adding a <td> with $index. The following code shows how to perform this operation.

 <table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

How to use $even and $odd in tables?

The following code depicts how to use the $even and $odd in tables. They are used as conditions in if statements in the given code

<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>