Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Generate Dynamic Table content by using form fields in AngularJs

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 2.17k
    Comment on it

    Generate Dynamic Table content by using form fields in AngularJs

    We all know that "AngularJs" is adopting vastly. We already found so many example of AngularJs and Application in AngularJS. We had created an example of "AngularJs" relate to "generate dynamic table data by submitting form".

    Below, the entire code is described and you can also test it by implementing it or downloading the attached file.

    HTML Code

    <div class="webContainer" ng-app="myApp">
      <!-- =Form-Table Section start= -->
      <section ng-controller="customerTblController" class="formSection">
        <form ng-submit="submitForm(myForm)" class="personal-info-form">
            <label>First Name</label>
            <input type="text" ng-model="fName" name="fname" /> <br />
            <label>Last Name</label>
            <input type="text" ng-model="lName" name="lname" /> <br />
            <input type="text" ng-model="age" name="Age" /> <br />
            <label>Highest Qualification</label>
            <input type="text" ng-model="hQualification" name="hQualification" /> <br />
            <label>Institute Name</label>
            <input type="text" ng-model="instituteName" name="instituteName" /> <br />
            <input type="submit" name="submit" class="btn-submit" /> <br />
        <table border="1" cellspacing="2" cellpadding="5" width="100%">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Highest Qualification</th>
                    <th>Institute Name</th>
                <tr ng-repeat ="fields in personalInfoForm">
                    <td>{{ fields.FirstName }}</td>
                    <td>{{ fields.LastName }}</td>
                    <td>{{ fields.Age }}</td>
                    <td>{{ fields.HighestQualification }}</td>
                    <td>{{ fields.InstituteName }}</td>
      </section><!-- =Form-Table Section End/= -->

    Angular File and Code

    <script src=""></script>
    <script type="text/javascript">
        var testApp = angular.module("myApp", []);
        testApp.controller("customerTblController", function($scope) {
            $scope.personalInfoForm = [];
            $scope.submitForm = function(){        
                    'LastName': $scope.lName, 
                    'Age': $scope.age, 
                    'HighestQualification': $scope.hQualification, 
                    'InstituteName': $scope.instituteName  
                $scope.fName= '';
                $scope.lName= '';
                $scope.age= '';
                $scope.hQualification= '';
                $scope.instituteName= '';

    CSS Code

    .webContainer {
        margin:0 auto;    
    .personal-info-form { 
        background: #D9D2C6; 
        padding:30px 0;
    .formSection label {
        display: inline-block;
        margin:0 0 20px 20%;
    .personal-info-form input[type="text"] {
        padding:10px 10px;

 1 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: