AngularJS Tables,how to create table in Angularjs

AngularJS Tables,how to create table in Angularjs

Table data is normally repeatable by nature.In angularjs the tables are used to display comming from database. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table.The ng-directive is used for repet loop for each and display in html.The array and object are print using ng-repeat directive.

<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>

AngularJS Tables Example

        <html>
        <head>
        <title>Angular JS Table Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <style>
        table, th , td {
          border: 1px solid #FF3300;
          border-collapse: collapse;
          padding: 5px;
        }
        table tr:nth-child(odd) {
          background-color: #FF66FF;
        }
        table tr:nth-child(even) {
          background-color: #FFCCFF;
        }
        </style>
        </head>
        <body>
        <h2>Angular JS Table Example</h2>
        <div ng-app="mainApp" ng-controller="userController">
        <table border="0">
        <tr><td>Enter  name:</td><td><input type="text" ng-model="user.name"></td></tr>
        <tr><td>Enter  Email: </td><td><input type="text" ng-model="user.email"></td></tr>
        <tr><td>Name: </td><td>{{user.fullName()}}</td></tr>
        <tr><td>Subject:</td><td>
            <table>
               <tr>
                  <th>Name</th>
                  <th>Marks</th>
               </tr>
               <tr ng-repeat="subject in user.subjects">
                  <td>{{ subject.name }}</td>
                  <td>{{ subject.marks }}</td>
               </tr>
            </table>
        </td></tr>
        </table>
        </div>
        <script>
        var mainApp = angular.module("mainApp", []);
        
        mainApp.controller('userController', function($scope) {
           $scope.user = {
              name: "Pramod ",
              email: "Kumawat.pramodkumar6@gmail.com",
              fees:500,
              subjects:[
                 {name:'Physics',marks:70},
                 {name:'Chemistry',marks:80},
                 {name:'Math',marks:65},
                 {name:'English',marks:75},
                 {name:'Hindi',marks:67}
              ],
              fullName: function() {
                 var userObject;
                 userObject = $scope.user;
                 return userObject.name + " " + userObject.email;
              }
           };
        });
        </script>
        </body>
        </html>
angularjstabledisplay

angularjstabledisplay

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates