Tables in AngularJS are used to display the data. Displaying the data using tables is very easy. Let’s take a look at the example of table. In this example, we’ll use the ng-repeat directive to display data within a table.

HTML Code

  1. <div ng-app="MyApp" ng-controller="studentController">
  2. <table border="0">
  3. <tr>
  4. <td>Enter first name:</td>
  5. <td><input type="text" ng-model="student.firstName"></td>
  6. </tr>
  7. <tr>
  8. <td>Enter last name: </td>
  9. <td> <input type="text" ng-model="student.lastName"> </td>
  10. </tr>
  11. <tr>
  12. <td>Name: </td>
  13. <td>{{student.fullName()}}</td>
  14. </tr>
  15. <tr>
  16. <td>City: </td>
  17. <td>{{student.city}}</td>
  18. </tr>
  19. <tr>
  20. <td>State: </td>
  21. <td>{{student.state}}</td>
  22. </tr>
  23. <tr>
  24. <td>Subjects:</td>
  25. <td>
  26. <table>
  27. <tr>
  28. <th>Name</th>
  29. <th>Marks</th>
  30. </tr>
  31. <tr ng-repeat="subject in student.subjects">
  32. <td>{{ subject.name }}</td>
  33. <td>{{ subject.marks }}</td>
  34. </tr>
  35. </table>
  36. </td>
  37. </tr>
  38. </table>
  39. </div>

Script Code

  1. <script>
  2. var mainApp = angular.module("MyApp", []);
  3. mainApp.controller('studentController', function($scope) {
  4. $scope.student = {
  5. firstName: "Akshay",
  6. lastName: "Manocha",
  7. city: "Gurgaon",
  8. state: "Haryana",
  9. subjects: [{
  10. name: 'English',
  11. marks: 75
  12. }, {
  13. name: 'Math',
  14. marks: 99
  15. }, {
  16. name: 'Computer Science',
  17. marks: 60
  18. }, {
  19. name: 'French',
  20. marks: 75
  21. }, {
  22. name: 'Hindi',
  23. marks: 75
  24. }],
  25. fullName: function() {
  26. var studentObject;
  27. studentObject = $scope.student;
  28. return studentObject.firstName + " " + studentObject.lastName;
  29. }
  30. };
  31. });
  32. </script>

In the above code, we’ve created two variables (“firstName” and “secondName”) and assigned these variables along with their value to our $scope variable (“$scope.student”). Then, we’ve created an array of name “subjects”. At last, we have a simple function that will simply concatenate the first name and last name.

CSS

  1. <style>
  2. table,
  3. th,
  4. td {
  5. border: 1px solid grey;
  6. border-collapse: collapse;
  7. padding: 5px;
  8. }
  10. table tr:nth-child(odd) {
  11. background-color: #8fdfe8;
  12. }
  14. table tr:nth-child(even) {
  15. background-color: #ffffff;
  16. }
  17. </style>
For more information on AngularJS, please visit this blog.