首页 > 代码库 > 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获取到表单里面的数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。