Home > Developer > Web Develop
Angular JS Implementation form submission when the following table gets the data inside the form
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<link rel= "stylesheet" href= "Css/bootstrap.min.css"/>
<script src= ". /angular-1.5.5/angular.min.js "></script>
<body ng-app= "MYAPP" ng-controller= "Ctrl" >
<form action= "" >
<p> name <input type= "text" ng-model= "name"/></p>
<p> <input type= "text" ng-model= "age"/></p>
<p> sex <input type= "text" ng-model= "Sex"/></p>
</form>
<button type= "Submit" class= "btn Btn-info" ng-click= "Add ()" > Submit </button>
<table class= "Table table-bordered" >
<thead>
<tr>
<th> name </th>
<th> Age </th>
<th> Sex </th>
</tr>
</thead>
<tbody>
<tr ng-repeat= "Elem in Array" >
<td>{{elem.name}}</td>
<td>{{elem.age}}</td>
<td>{{elem.sex}}</td>
</tr>
</tbody>
</table>
</body>
<script>
var app= angular.module ("myApp", []);
App.controller ("Ctrl", function ($scope) {
$scope. Array=new Array (); Create an empty array
$scope. Add=function () {
$scope. Object=new object (); Create an empty object to put the data in or (Var Object=new object ())
$scope. object.name= $scope. Name; /* ($scope. object.name) to expand the Name property inside the object */
$scope. object.age= $scope. Age;
$scope. object.sex= $scope. Sex;
$scope. Array.push ($scope. Object);/* Add the data inside the object to the array */
Console.log (this);
Console.log ($scope)
}
})
</script>
Angular JS Implementation form submission when the following table gets the data inside the form
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
