All for Joomla All for Webmasters

AngularJS Tables

The ng-repeat directive is used to draw tables in AngularJS. Displaying tables with AngularJS is very easy and simple.

Let’s take an example. This example use ng-repeat directive to draw a table.

See this example:

  1. <table>
  2.    <tr>
  3.       <th>Name</th>
  4.       <th>Marks</th>
  5.    </tr>
  6.    <tr ng-repeat = “subject in student.subjects”>
  7.       <td>{{ subject.name }}</td>
  8.       <td>{{ subject.marks }}</td>
  9.    </tr>
  10. </table>

Displaying with CSS style

You can also style the tables by using CSS.

See this example:

  1.  <style>
  2.    table, th , td {
  3.       border: 1px solid grey;
  4.       border-collapse: collapse;
  5.       padding: 5px;
  6.    }
  7.    table tr:nth-child(odd) {
  8.       background-color: #f2f2f2;
  9.    }
  10.    table tr:nth-child(even) {
  11.       background-color: #ffffff;
  12.    }
  13. </style>

AngularJS Table example with CSS

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Angular JS Table</title>
  5.       <script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script>
  6.       <style>
  7.          table, th , td {
  8.             border: 1px solid grey;
  9.             border-collapse: collapse;
  10.             padding: 5px;
  11.          }
  12.          table tr:nth-child(odd) {
  13.             background-color: #f2f2f2;
  14.          }
  15.          table tr:nth-child(even) {
  16.             background-color: #ffffff;
  17.          }
  18.       </style>
  19.    </head>
  20.    <body>
  21.       <h2>AngularJS Sample Application</h2>
  22.       <div ng-app = “mainApp” ng-controller = “studentController”>
  23.          <table border = “0”>
  24.             <tr>
  25.                <td>Enter first name:</td>
  26.                <td><input type = “text” ng-model = “student.firstName”></td>
  27.             </tr>
  28.             <tr>
  29.                <td>Enter last name: </td>
  30.                <td>
  31.                   <input type = “text” ng-model = “student.lastName”>
  32.                </td>
  33.             </tr>
  34.             <tr>
  35.                <td>Name: </td>
  36.                <td>{{student.fullName()}}</td>
  37.             </tr>
  38.             <tr>
  39.                <td>Subject:</td>
  40.               <td>
  41.                   <table>
  42.                      <tr>
  43.                         <th>Name</th>.
  44.                         <th>Marks</th>
  45.                      </tr>
  46.                      <tr ng-repeat = “subject in student.subjects”>
  47.                         <td>{{ subject.name }}</td>
  48.                         <td>{{ subject.marks }}</td>
  49.                      </tr>
  50.                   </table>
  51.                </td>
  52.             </tr>
  53.          </table>
  54.       </div>
  55.       <script>
  56.          var mainApp = angular.module(“mainApp”, []);
  57.          mainApp.controller(‘studentController’, function($scope) {
  58.             $scope.student = {
  59.                firstName: “Rahul”,
  60.                lastName: “Rai”,
  61.                fees:500,
  62.                subjects:[
  63.                   {name:’Physics’,marks:850},
  64.                   {name:’Chemistry’,marks:80},
  65.                   {name:’Math’,marks:90},
  66.                   {name:’English’,marks:80},
  67.                   {name:’Hindi’,marks:70}
  68.                ],
  69.                fullName: function() {
  70.                   var studentObject;
  71.                   studentObject = $scope.student;
  72.                   return studentObject.firstName + ” ” + studentObject.lastName;
  73.                }
  74.             };
  75.          });
  76.       </script>
  77.    </body>
  78. </html>
PinIt
submit to reddit

Leave a Reply

Top