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

最新推荐文章于 2022-07-25 20:03:13 发布

weixin_30856725

最新推荐文章于 2022-07-25 20:03:13 发布

阅读量393

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/yaomengli/p/6843022.html

版权

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>

效果图

转载于:https://www.cnblogs.com/yaomengli/p/6843022.html

weixin_30856725

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/boots...
复制链接

扫一扫