AngularJS | Tables - GeeksforGeeks

16 Oct, 2019
The data in tables are basically repeatable, so you can use ng-repeat directives to create tables easilyThe 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 ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">      </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:
nidhi_biet
AngularJS-Directives
Picked
AngularJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular PrimeNG Dropdown Component
Angular | keyup event
Angular PrimeNG Calendar Component
Auth Guards in Angular 9/10/11
How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
Angular PrimeNG Messages Component
What is AOT and JIT Compiler in Angular ?
How to set focus on input field automatically on page load in AngularJS ?
Angular 10 (blur) Event