angular网络请求数据,并进行增删改查

最新推荐文章于 2021-03-17 07:30:55 发布

DJSYPO

最新推荐文章于 2021-03-17 07:30:55 发布

阅读量499

点赞数 1

本文链接：https://blog.csdn.net/DJSYPO/article/details/79091688

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           thead{
               background: #696969;
           }
           tbody tr:nth-child(2n){
               background: #A9A9A9;
           }
           span{
               color: red;
           }
           .span{
               color: black;
           }
       </style>
       <script src="js/angular.min.js"></script>
       <script>
           angular.module("zyapp",[]).controller("demoa",function($scope,$http){
               $scope.f = false;
               $scope.add_sex='男';
               //$http请求网络数据 get("请求指定路径的数据")
               $http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
               .then(function(p){//d网址返回的数据
                   $scope.persons=p.data;
               });
               //算年龄
               $scope.getage = function(bir){
                   //获取员工的出生日期
                   var p_bth = new Date(bir).getYear();
                   //获取现在的日期
                   var n_bth = new Date().getYear();
                   return n_bth-p_bth;
               }
               //删除
               $scope.del = function(id){
                   var index = 0;
                   for (var i in $scope.persons) {
                       if($scope.persons[i].id==id){
                           index=i;
                       }
                   }
                   var t = confirm("确定删除吗?")
                   if(t){
                       $scope.persons.splice(i,1);
                   }
               }
               //全选
               $scope.ckAll = function(){
                   for (var i in $scope.persons) {
                       $scope.persons[i].ck = $scope.flag;

                   }
               }
               $scope.delAll = function(){
                   for (var i=0;i<$scope.persons.length;i++) {

                       if($scope.persons[i].ck==true){

                                $scope.persons.splice(i,1);
                               i--;

                       }
                   }
               }
               //根据部门查询
               $scope.selbm = function(bname){
                   if($scope.cxbm==undefined||$scope.cxbm==""){
                       return true;
                   }
                   if(bname.indexOf($scope.cxbm)>-1){
                       return true;
                   }else{
                       return false;
                   }
               }
               $scope.add = function(){
                   //存放错误信息的数组
                   $scope.errors=[];
                   //判断是否可以添加
                   if($scope.add_name==undefined||$scope.add_name==""){
                       $scope.v_name = true;
                       $scope.errors.push(8);
                   }else{
                       $scope.v_name=false;
                   }
                   if($scope.add_salary==undefined||$scope.add_salary==""){
                       $scope.v_salary = true;
                       $scope.errors.push(9);
                   }else{
                       $scope.v_salary=false;
                   }
                   if($scope.add_birthday==undefined||$scope.add_birthday==""){
                       $scope.v_birthday = true;
                       $scope.errors.push(90);
                   }else{
                       $scope.v_birthday=false;
                   }
                   if($scope.add_bmname==undefined||$scope.add_bmname==""){
                       $scope.v_bmname = true;
                       $scope.errors.push(98);
                   }else{
                       $scope.v_bmname=false;
                   }

                   //部门对象
                   var obj_b;
                   if($scope.add_bmname==undefined||$scope.add_bmname==""){
                       $scope.errors.push(1);
                   }else{
                       //判断部门所在对象,重新组装
                       if($scope.add_bmname=='市场部'){
                           obj_b={id:1,name:$scope.add_bmname};
                       }else if($scope.add_bmname=='研发部'){
                           obj_b={id:2,name:$scope.add_bmname};
                       }
                   }

                   //判断添加
                   if($scope.errors.length==0){
                       $scope.persons.push({
                           "birthday": $scope.add_birthday,
                              "department": obj_b,
                           "gender": $scope.add_sex,
                           "id": $scope.persons.length+50,
                           "name": $scope.add_name,
                           "salary": $scope.add_salary
                       })
                       $scope.formshow=false;
                   }


               }
           })
       </script>
   </head>
   <body ng-app="zyapp" ng-controller="demoa">
       <h2 ng-show="persons.length==0">页面无数据操作</h2>
       <div ng-show="persons.length>0">
       <input ng-model="vname" type="text" placeholder="根据姓名模糊查询" style="border-radius: 50px; border-color: black;"/>
       <input ng-model="cxbm" type="text" placeholder="根据部门模糊查询" style="border-radius: 50px; border-color: black;"/>
       <select ng-model="px">
           <option value="">排序</option>
           <option value="-salary">工资由高到低</option>
           <option value="+salary">工资由低到高</option>
           <option value="+birthday">年龄由高到低</option>
           <option value="-birthday">年龄由低到高</option>
       </select>
       <button ng-click="delAll()">批量删除</button>
       <button ng-click="formshow=true">添加员工</button>
       <br /><br />
       <table border="1" style="text-align: center;">
           <thead>
           <tr>
               <td> <input type="checkbox" ng-model="flag" ng-click="ckAll()"/> </td>
               <td>员工姓名</td>
               <td>员工年龄</td>
               <td>员工性别</td>
               <td>员工工资</td>
               <td>出生日期</td>
               <td>员工部门</td>
               <td>操作</td>
           </tr>
           </thead>
           <tbody>
           <tr ng-repeat="p in persons|filter:{name:vname}|orderBy:px" ng-show="selbm(p.department.name)">
               <td> <input type="checkbox" ng-model="p.ck"/> </td>
               <td >
                   <span class="span" ng-hide="f">{{p.name}}</span>
                   <span class="span" ng-show="f">
                       <input ng-model="p.name"/>
                   </span>
               </td>
               <td>{{getage(p.birthday)}}</td>
               <td>{{p.gender}}</td>
               <td>{{p.salary|currency:"¥:"}}</td>
               <td>{{p.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
               <td>{{p.department.name}}</td>
               <td> <button ng-click="del(p.id)">删除</button>
                   <button ng-click="f=!f">修改</button>
               </td>
           </tr>
           </tbody>
       </table>
       </div>
       <div ng-show="formshow">
           员工姓名:<input type="text" ng-model="add_name"/> <span ng-show="v_name">员工姓名填写错误</span> <br />
           员工薪资:<input type="number" ng-model="add_salary"/><span ng-show="v_salary">请填写员工薪资</span> <br />
           性别:<input type="radio" value="男" ng-model="add_sex"/>男
               <input type="radio" value="女" ng-model="add_sex"/>女<br />
           出生日期:<input type="date" ng-model="add_birthday"/><span ng-show="v_birthday">日期格式错误</span> <br />
           部门:<select ng-model="add_bmname">
               <option value="">请选择</option>
               <option>市场部</option>
               <option>研发部</option>
           </select><span ng-show="v_bmname">请选择所属部门</span><br />
           <button ng-click="add()">保存</button>
       </div>
   </body>
</html>

DJSYPO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular网络请求数据,并进行增删改查

thead{ background: #696969; } tbody tr:nth-child(2n){ background: #A9A9A9; } span{ color: red; }
复制链接

扫一扫