模糊查询/批量删除

最新推荐文章于 2023-09-14 15:22:33 发布

qq_42436644

最新推荐文章于 2023-09-14 15:22:33 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/qq_42436644/article/details/80793741

版权

[
   {
       "name": "张三",
       "age": 26,
       "sex": "女",
       "salary": 24000,
       "birth": "345321321",
       "part": "研发部"
   }, {
       "name": "李四",
       "age": 25,
       "sex": "男",
       "salary": 26000,
       "birth": "3454321421",
       "part": "市场部"
   }, {
       "name": "王五",
       "age": 20,
       "sex": "男",
       "salary": 28000,
       "birth": "543221321",
       "part": "市场部"
   },{
       "name": "赵六",
       "age": 30,
       "sex": "男",
       "salary": 30000,
       "birth": "345321654",
       "part": "研发部"
   }, {
       "name": "田七",
       "age": 32,
       "sex": "女",
       "salary": 32000,
       "birth": "345321987",
       "part": "市场部"
   },{
       "name": "孙八",
       "age": 23,
       "sex": "女",
       "salary": 33000,
       "birth": "345321321",
       "part": "研发部"
   }, {
       "name": "老九",
       "age": 22,
       "sex": "男",
       "salary": 34000,
       "birth": "345321321",
       "part": "研发部"
   }, {
       "name": "十全",
       "age": 38,
       "sex": "女",
       "salary": 40000,
       "birth": "345321321",
       "part": "市场部"
   }

]

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <title>周考三</title>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <div ng-show="persons.length">
           <input type="text" placeholder="姓名" ng-model="name" />
           <input type="text" placeholder="部门" ng-model="part" />
           
           <select ng-change="paixu(value)" ng-model="value" ng-init="value='年龄正序'">
               <option>年龄正序</option>
               <option>年龄倒序</option>
               <option>薪资正序</option>
               <option>薪资倒序</option>
               <option>生日正序</option>
               <option>生日倒序</option>

           </select>
           <input type="button" value="批量删除" ng-click="deleAll()" />

           <table border="1px" cellspacing="0px" cellpadding="0px">
               <tr ng-repeat="p in persons|filter:name|filter:part|orderBy:type">
                   <td>
                       <input type="checkbox" />
                   </td>
                   <td>
                       {{p.name}}
                   </td>
                   <td>
                       {{p.age}}
                   </td>
                   <td>
                       {{p.sex}}
                   </td>
                   <td>
                       {{p.salary|currency:"￥:"}}
                   </td>
                   <td>
                       {{p.birth|date:"yyyy-MM-dd hh:mm:ss"}}
                   </td>
                   <td>
                       {{p.part}}
                   </td>
                   <td>
                       <input type="button" value="删除" ng-click="dele($index)" />
                   </td>
               </tr>
           </table>
       </div>
       <span ng-hide="persons.length">
           无数据
       </span>

       <script type="text/javascript">
           var mo = angular.module("myApp", []);
           mo.controller("myCtrl", function($scope, $http) {
               //使用网络请求，得到数据
               //先写完方法，再添加参数
               $http.get("demo.json").then(function(req) {
                   var d = req.data; //data是封装数据的对象
                   $scope.persons = d;
               });
               $scope.type = "age";
               //排序
               $scope.paixu = function(v) {
                   switch(v) {
                       case "年龄正序":
                           $scope.type = "age";
                           break;
                       case "年龄倒序":
                           $scope.type = "-age";
                           break;
                       case "薪资正序":
                           $scope.type = "salary";
                           break;
                       case "薪资倒序":
                           $scope.type = "-salary";
                           break;
                       case "生日正序":
                           $scope.type = "birth";
                           break;
                       case "生日倒序":
                           $scope.type = "-birth";
                           break;
                       default:
                           break;
                   }
               }
               //单个删除
               $scope.dele = function($index) {
                   //弹框
                   var b = confirm("删除吗?");
                   if(b) {
                       $scope.persons.splice($index, 1);
                   }
               }
           });
       </script>
   </body>

</html>