JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

HTML

<body>
    <div ng-app>
     <div ng-controller="myController">

   <form ng-submit="addRecord()">
    <table class="center">
    <tr>
        <td>Name :</td><td><input type=text ng-model="name"> </td>
    </tr>    
    <tr>
        <td>Age :</td><td><input type=text id=age ng-model="age"></td>
    </tr>     
           
    <tr>
        <td>Email :</td><td><input type=text id=email ng-model="email"></td>
    </tr> 
                
    <tr>
        <td>Phone :</td><td><input type=text id=phone ng-model="phone"></td>
    </tr> 
        
     <tr>
         <td><br><br> <input type="submit" value="Add"></td>
             <td><br><br> <input type="reset" value="Cancel"></td>
     </tr> 
 </table> 
             </form>
                <table  class="tbl"  >
                    <tr >
                        <th class="tbtd"> Name </th>   
                         <th class="tbtd">Age   </th>
                         <th class="tbtd">Email </th>
                         <th class="tbtd">Phone  </th>
                    </tr>                    
                    
                    <tr  ng-repeat="record in records"  >
                        <td> {{record.name}} </td>   
                         <td>{{record.age}}  </td>
                         <td>{{record.email}}  </td>
                         <td>{{record.phone}}  </td>
                    </tr>
                </table>
 
  </div>
</div>
        </body>

CSS

.tbl{
    
    width:100%;
    border:1px solid black; 
}
.tbtd{
     text-align:left;
}

 table.center {
    margin-left: auto;
    margin-right: auto;
     padding:10px;
}

JavaScript

function myController($scope){
$scope.records=[
];
 
$scope.addRecord=function(){
    var nm=$scope.name; 
    var ag=$scope.age;		// alert(ag);
 	 var all=[];
    if($scope.name && $scope.age && $scope.email && $scope.phone)
    {  
	$scope.records.push({name:$scope.name, age:$scope.age, email:$scope.email, phone:$scope.phone });
    $scope.name="";
    $scope.age="";
    $scope.email="";
        $scope.phone="";
        $scope.phone="";
        
    }
    else
    {
        alert("Please fill all fields");
    } 
    /*
 all.push(nm);
    all.push(ag); 
    var flag=true;
      for(var i=0;i<all.length;i++)
        {  
        	if(all[i] ==="")
    		{  
                flag=false; 
            	alert("Please fill all the fields" );
                break;
            } 
        }
 if(flag)
 { 
 }
 */

};


}