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><br><br> <input type="submit" value="Add"></td>
     </tr>
 </table> 
             </form>
                <table  class="tbl" ng-repeat="record in records" >
                    <tr>
                        <td>{{record.name}}</td> <td>{{record.age}}</td>
                    </tr>
                </table>
 
  </div>
</div>
        </body>

CSS

.tbl{
    
    width:100%;
    border:3px solid black;
}

JavaScript

function myController($scope){
$scope.records=[
    {name:'Name',age:'Age'}
];
$scope.addRecord=function(){
    
   
    var nm=$scope.name; 
    var ag=$scope.age;alert("sss");
    var allfields=[];
    allFields.push(nm);
    allFields.push(ag);
    alert("sss");
      for(var i=0;i<allFields.length;i++)
        {
            alert("alll");
        	if(allFields[i] === "")
    		{
            	alert("Please fill all the fields" );
                break;
            } 
        }
    
    
    
$scope.records.push({name:$scope.name, age:$scope.age });
    $scope.name="";
    $scope.age="";
};


}