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

来源：互联网发布：淘宝秋冬男旅游鞋编辑：程序博客网时间：2024/06/06 03:14

<!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>

阅读全文

0 0