您的位置：首页 > Web前端 > JavaScript

anduraljs的表格删除和查找关键字

2017-11-21 09:23 337 查看

<!DOCTYPE html>

<html>

   <head>

       <meta charset="utf-8" />

       <title></title>

       <style type="text/css">

           body {

               margin: 0 auto;

               width: 500px;

               height: 500px;

           }



           table {

               width: 500px;

               height: 80px;

           }

       </style>

       <script src="js/angular.min.js"></script>

       <script src="js/jquery-2.1.0.js"></script>

       <script>

           angular.module("myapp", [])

               .controller("demo", function($scope) {

                   $scope.datas = [{

                       name: "张三",

                       age: 18,

                       sex: "男",

                       happy: "2017 5.25",

                       caozuo: "删除"

                   }, {

                       name: "李三",

                       age: 18,

                       sex: "男",

                       happy: "2017 5.25",

                       caozuo: "删除"

                   }, {

                       name: "王娜",

                       age: 18,

                       sex: "女",

                       happy: "2017 5.25",

                       caozuo: "删除"

                   }];

                   $scope.del=function(i){

                       alert("是否删除")

                       $scope.datas.splice(i,1)

                       alert("删除成功")

                   }

               });

       </script>

   </head>

   <body ng-app="myapp" ng-controller="demo">

       <h1 style="text-align: center;">购物车</h1>

       <input ng-model="wyq" />

       <table border="1">

           <thead>

               <tr>

                   <th>姓名</th>

                   <th>年龄</th>

                   <th>性别</th>

                   <th>生日</th>

                   <th>操作</th>

               </tr>

           </thead>

           <tbody ng-repeat="dat in datas|filter:wyq">

               <tr>

                   <td>{{dat.name}}</td>

                   <td>{{dat.age}}</td>

                   <td>{{dat.sex}}</td>

                   <td>{{dat.happy|date :'yyyy-mm-dd hh:mm:ss'}}</td>

                   <td><button ng-click="del($index)">{{dat.caozuo}}</button></td>



               </tr>

           </tbody>

       </table>

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航