AngularJS | Tables
Last Updated :
16 Oct, 2019
Improve
The data in tables are basically repeatable, so you can use ng-repeat directives to create tables easily
The example will clear the approach.
Syntax:
<element ng-repeat="expression">Content..<element>
Displayed Data in table.
<!DOCTYPE html> <html> <head> <title>AngularJS ng-repeat Directive</title> </head> <body> <center> <h1 style="color:green;">GeekforGeeks</h1> <table> <tr> <th>Course</th> <th>Duration</th> </tr> <tr ng-repeat = "subject in student.subjects"> <td>{{ Course.name }}</td> <td>{{ Duration.time }}</td> </tr> </table> </center> </body> </html> |
Output:
Displayed with CSS style
<style> table, th , td { border: 1px solid black; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #82E0AA ; } table tr:nth-child(even) { background-color: #2ECC71 ; } h1{ color:green; } </style> |
AnhularJS ng-repeat directives Example with the above codes: Here you will see the combination of above html and css with the AngularJS ng-repeat directives.
<!DOCTYPE html> <html> <head> <title>Angular JS Table</title> <script src = </script> <style> table, th , td { border: 1px solid black; border-collapse: collapse; padding: 5px; } table { background-color: grey; } h1{ color:green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <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: "Pranab", lastName: "Mukherjee", subjects:[ {name:'Algorithm',marks:70}, {name:'Data Structure',marks:80}, {name:'Architecture',marks:65}, {name:'Digital Analog',marks:75} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> </center> </body> </html> |
Output:
