首页 > 代码库 > angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.min.css"/>
<script src="http://www.mamicode.com/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获取到表单里面的数据