angular js 实现表单提交时下面的table获取到表单里面的数据
Posted yaomengli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular js 实现表单提交时下面的table获取到表单里面的数据相关的知识，希望对你有一定的参考价值。
angular js 实现表单提交时下面的table获取到表单里面的数据
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="../angular-1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<form action="">
<p>姓名 <input type="text" ng-model="name"/></p>
<p>年龄 <input type="text" ng-model="age"/></p>
<p>性别 <input type="text" ng-model="sex"/></p>
</form>
<button type="submit" class="btn btn-info" ng-click="add()">提交</button>
<table class="table table-bordered" >
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</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(); //创建一个空数组
$scope.add=function(){
$scope.object=new Object(); //创建一个空对象用来放数据或者（var object=new Object()）
$scope.object.name=$scope.name; /*（$scope.object.name）为拓展对象里面的name属性*/
$scope.object.age=$scope.age;
$scope.object.sex=$scope.sex;
$scope.array.push($scope.object);/* 把对象里面的数据添加到数组里*/
console.log(this);
console.log($scope)
}
})
</script>
</html>
效果图
以上是关于angular js 实现表单提交时下面的table获取到表单里面的数据的主要内容，如果未能解决你的问题，请参考以下文章
防止使用 angular.js 提交多个表单 - 禁用表单按钮