AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw 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>

Table can be styled using CSS Styling.

<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>

Example

Following example will showcase all the above mentioned directive.

testAngularJS.htm

<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: "Mahesh",

               lastName: "Parashar",

               fees:500,

              

               subjects:[

                  {name:'Physics',marks:70},

                  {name:'Chemistry',marks:80},

                  {name:'Math',marks:65},

                  {name:'English',marks:75},

                  {name:'Hindi',marks:67}

               ],

              

               fullName: function() {

                  var studentObject;

                  studentObject = $scope.student;

                  return studentObject.firstName + " " + studentObject.lastName;

               }

            };

         });

      </script>

     

   </body>

</html>