网络获取 get 查找

最新推荐文章于 2022-12-30 16:22:56 发布

I_do_

最新推荐文章于 2022-12-30 16:22:56 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/shitou0/article/details/79100543

版权

<html>

   <head>
       <meta charset="utf-8" />
       <title>月考最终练习网络获取</title>
       <script type="text/javascript" src="libs/angular.min.js"></script>
       
       <style>
           table tr:nth-child(even) {
               background: #80FFFF;
           }

           table tr:nth-child(odd) {
               background: #FF80FF;
           }
       </style>
       <script type="text/javascript">
           var App = angular.module("App", []);
           App.controller("DemoCtrl", function($scope, $http) {
               //               获取网络数据
               $http({
                   //                   进行get请求
                   method: "GET",
                   url: "http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
               }).success(function(data) {
                   $scope.datas = data;
                   //                   打印
                   //console.log($scope.datas);
               }).error(function(data) {

               });
               //               单个删除
               $scope.del = function(na) {
                   if(window.confirm("你确定删除" + na + "吗")) {
                       for(index in $scope.datas) {
                           if(na == $scope.datas[index].id) {
                               $scope.datas.splice(index, 1);
                           }
                       }
                   }
               }
               //全选反选
               $scope.selectAll = false;
               $scope.selectAllFun = function() {
                   if($scope.selectAll) {
                       for(index in $scope.datas) {
                           $scope.datas[index].state = true;
                       }
                   } else {
                       for(index in $scope.datas) {
                           $scope.datas[index].state = false;
                       }
                   }
               }
               //批量删除
               $scope.delSelect = function() {
                   //定义一个空数组
                   var arr = [];
                   for(index in $scope.datas) {
                       if($scope.datas[index].state) {
                           arr.push($scope.datas[index].name);
                       }
                   }
                   if(arr.length <= 0) {
                       alert("请重新选择删除的项目！");
                   } else {
                       if(window.confirm("确定要删除吗?")) {
                           for(index in arr) {
                               for(index2 in $scope.datas) {
                                   if(arr[index] == $scope.datas[index2].name) {
                                       $scope.datas.splice(index2, 1);
                                   }
                               }
                           }
                       } else {
                           alert("你已取消删除！");
                       }
                   }
               }
           });
       </script>
   </head>

   <body ng-app="App" ng-controller="DemoCtrl">
       <center>
           <input type="text" placeholder="根据姓名输入查询..." ng-model="search" />
           
           <input type="text" placeholder="根据部门输入查询..." ng-model="bsearch" />
           <select ng-model="selOrder">
               <option value="salary" selected="selected">数量正序</option>
               <option value="-salary">数量正序</option>
           </select>
           <input type="button" value="批量删除" ng-click="delSelect()" style="background: #FF0000;" />
           <table border="1px">
               <thead>
                   <tr style="background:yellow">
                       <td>
                           <input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" />
                       </td>
                       <td>员工姓名</td>
                       <td>员工年龄</td>
                       <td>员工性别</td>
                       <td>员工薪资</td>
                       <td>出生日期</td>
                       <td>部门名称</td>
                       <td>操作</td>
                   </tr>
               </thead>
               <tbody>
                   
                   <tr ng-repeat="a in datas | filter:{name:search}|orderBy:selOrder |filter:bsearch">
                       <td><input type="checkbox" ng-model="a.state" /></td>
                       <td>{{a.name}}</td>
                       <td>{{a.id}}</td>
                       <td>{{a.gender}}</td>
                       
                       <td>{{a.salary|currency:"￥"}}</td>
                       
                       <td>{{a.birthday |date:"yyyy-MM-dd HH:mm:ss"}}</td>
                       <td>{{a.department.name}}</td>
                       <td>
                           <button ng-click="del(a.id)" style="background: #FF8040;">删除</button>
                       </td>
                   </tr>
               </tbody>
           </table>

       </center>
   </body>

</html>

I_do_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网络获取 get 查找

月考最终练习网络获取 table tr:nth-child(even) { background: #80FFFF; } table tr:nth-child(odd) { background: #F
复制链接

扫一扫