Tables in AngularJS Example


       In this tutorial lets see how to design AngularJS tutorial using ng-repeat directive. Generally tables are repeating structure, so ng-repeat directive can be used to draw tables easily..
Lets draw a simple table to show Name of the person and his age. Below is the output of the program, that will help you understand how the code is structured.
AngularJS Table
Step 1: Styling your Table :
So here we will add styles to <table>, <tr>, <td> tags which is self explanatory.

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

Step 2: Draw table

    <table border ="0">
           
            <tr>
               <td>Name And Age:</td>
               <td>
                  <table>
                    
                    <tr>
                        <th>Name</th>.
                        <th>Age</th>
                     </tr>
                     
                     <tr ng-repeat ="x in name.names">
                        <td>{{ x.name }}</td>
                        <td>{{ x.age }}</td>
                     </tr>
       
                  </table>
               </td>
            </tr>
            
    </table>

Here we have defined table within a table and the inner table has ng-repeat directive which will repeat the table structure. Lets see the whole html file to have a better understanding.

AngularJSTables.html


<html>
   
   <head>
      <title>Angular JS Table</title>
      <script src ="https://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: #ffe4b2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
      <h2>AngularJS Table</h2>
      <div ng-app ="myapp" ng-controller ="mycontroller">
         
         <table border ="0">
           
            <tr>
               <td>Name And Age:</td>
               <td>
                  <table>
                    
                    <tr>
                        <th>Name</th>.
                        <th>Age</th>
                     </tr>
                     
                     <tr ng-repeat ="x in name.names">
                        <td>{{ x.name }}</td>
                        <td>{{ x.age }}</td>
                     </tr>
       
                  </table>
               </td>
            </tr>
            
         </table>
         
      </div>
      
      <script>
         var mainApp = angular.module("myapp", []);
         
         mainApp.controller('mycontroller', function($scope) {
            $scope.name = {
               
               names:[
                  {name:'Robert',age:65},
                  {name:'Joe',age:35},
                  {name:'Jacques',age:20},
                  {name:'John',age:42},
                  {name:'Pierre',age:50}
               ],
  
            };
         });
      </script>
      
   </body>
</html>

This is a self explanatory code. ng-repeat plays the role to display the names one by one.

  names:[
                  {name:'Robert',age:65},
                  {name:'Joe',age:35},
                  {name:'Jacques',age:20},
                  {name:'John',age:42},
                  {name:'Pierre',age:50}
        ],

ng-repeat Directive syntax :

<tr ng-repeat ="x in name.names">
          <td>{{ x.name }}</td>
          <td>{{ x.age }}</td>
  </tr>

Here "x" stands for each row.

Hope this tutorial helps you to understand the below stuff :

Tables in AngularJS
Using ng-repeat to draw tables in AngularJS





Reactions:

0 comments :

Post a Comment