AngularJS | Dynamic table with form

AngularJS | Dynamic table with form

by santhosh lanka

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="myapp" ng-controller="ListController">     
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form ng-submit="addNew(personalDetails)">
                           <table>
													<thead></thead>
													<tbody>
														<tr> 
															<td> 
																<input type="text" class="form-control" placeholder="First name" ng-model="personalDetails.fname" required>
															</td>
														</tr>
														<tr> 
															<td> 
																<input type="date" class="form-control" placeholder="Last name" ng-model="personalDetails.lname" value="2019/09/04" required>   
															</td>
														</tr>
														<tr> 
															<td> 
																<input type="email" class="form-control" placeholder="Email" ng-model="personalDetails.email" required>  
															</td>
														</tr>
                            <input type="submit" value="Submit" style=" clear:both" class="btn btn-primary"> 
													</tbody>
					                                
					                               
					                            </table>
                                
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" ng-hide="!personalDetails.length">
            <div class="col-md-12">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
                            <th>First Name</th>
                            <th>Last Name</th>
                           ...

CSS

.container{
  margin: 20px 0;
}

JavaScript

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
    $scope.personalDetails = [];
    
        $scope.addNew = function(personalDetails){
            $scope.personalDetails.push({ 
                'fname': personalDetails.fname, 
                'lname': personalDetails.lname,
                'email': personalDetails.email,
            });
        };
    
        
    

    
}]);