json双表

最新推荐文章于 2024-09-02 21:11:39 发布

qq_41640196

最新推荐文章于 2024-09-02 21:11:39 发布

阅读量194

点赞数

分类专栏： json 文章标签： json

本文链接：https://blog.csdn.net/qq_41640196/article/details/79092997

版权

json 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #sd {
               border-radius: 10px; /*圆角边框 */
               background-image: url(img/ss.jpg);
               background-position: right;
               background-repeat: no-repeat;
           }

           label {
               display: block;
           }

           span {
               color: red;
           }
       </style>
       <script src="js/angular.min.js"></script>
       <script>
           angular.module("gaoyn", [])
               .controller("democ", function($scope, $http) {
                   $scope. add_sex='男';


                   //$http请求网络上的数据 get():请求指定路径的数据
                   $http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
                       .then(function(d) { //d---->网址返回数据
                           // $scope.persons ==>视图中遍历的对象
                           $scope.persons = d.data; //json串根据键获取值   对象.键名
                       });
                   //每行遍历都会调用getAge 传进来出生日期, 在函数
                   $scope.getAge = function(bir) {
                       var b = new Date(bir).getYear(); //出生的年份
                       var nowb = new Date().getYear();
                       return nowb - b;
                   }

                   $scope.del = function(id) { //js删除只能根据索引删除
                       //根据id查找id所对应索引
                       var index = 0;
                       for(var i in $scope.persons) {
                           if($scope.persons[i].id == id) {
                               index = i;
                           }
                       }

                       //弹框确认是否删除
                       var f = confirm("确定删除吗?");
                       if(f) {
                           $scope.persons.splice(index, 1);
                       }
                   }

                   $scope.ckall1 = function() {
                       console.log($scope.persons);
                       // 遍历数组,让数组的对象状态是否选中----->顶层的复选框
                       for(var i in $scope.persons) {
                           $scope.persons[i].ck = $scope.ckall;
                       }
                   }

                   $scope.delAll = function() {
                       for(var i = 0; i < $scope.persons.length; i++) {
                           if($scope.persons[i].ck) { //判断当前行是否被勾选,如果勾选则进行删除操作
                               $scope.persons.splice(i, 1); //删除完毕后,下个对象自动移动到当前索引
                               i--;

                           }
                       }
                   }

                   $scope.getDname = function(dname) { //每行显示之前都自动调用getDname dname是当前行对应部门名称
                       //获取部门查询输入框的值
                       if($scope.seldepart == undefined || $scope.seldepart == "") { //判断无条件过滤,使其全部显示
                           return true; //return 结束方法的作用
                       }

                       //dname中是否含有输入框输入部分字符     var i= "我是八维讲师".indexOf("八维");
                       if(dname.indexOf($scope.seldepart) > -1) {
                           return true;
                       }
                       return false;
                   }

                   $scope.save = function() {
                       //存放错误提示信息的数组
                       $scope.errors = [];

                       if($scope.add_uname == undefined || $scope.add_uname == "") {
                           $scope.val_uname = true; //val_uname 控制用户名不合法是否显示
                           $scope.errors.push(1);
                       } else {
                           $scope.val_uname = false;
                       }

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


                       //添加
                       if($scope.errors.length == 0) {
                           $scope.persons.push({
                                   "salary": $scope.add_salar,
                                   "birthday": $scope.add_birth.valueOf(), //获取date日期的毫秒数
                                   "department": obj_d,
                                   "gender": $scope.add_sex,
                                   "id": $scope.persons.length+100,
                                   "name": $scope.add_uname
                               }
                           );
                           console.log($scope.persons)

                       }



                   }

               })
       </script>
   </head>

   <body ng-app="gaoyn" ng-controller="democ">
       
       <h1 ng-show="persons.length==0">
           页面无操作数据
       </h1>

       
       <div ng-show="persons.length>0">
           <table border="1px">
               <tr>
                   <td colspan="7">
                       <input type="checkbox" ng-model="ckall" ng-click="ckall1()" />
                       <button ng-click="delAll()">批量删除</button>
                       <input id="sd" ng-model="seldepart" placeholder="根据部门模糊查询" />
                       <button ng-click="showAdd=true">新增用户</button>
                   </td>

               </tr>

               <tr ng-repeat="d in persons|orderBy:'+birthday'" ng-show="getDname(d.department.name)">
                   <td><input type="checkbox" ng-model="d.ck" /> </td>
                   <td>{{d.name}}</td>
                   <td>{{getAge(d.birthday)}}</td>
                   <td>{{d.gender}}</td>
                   <td>{{d.salary|currency:"¥:"}}</td>
                   <td>{{d.department.name}}</td>
                   <td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
                   <td><button ng-click="del(d.id)">删除</button></td>
               </tr>
           </table>

       </div>
       <div ng-show="showAdd">
           <label>
               用户名:<input type="text" ng-model="add_uname" placeholder="请输入用户名" /><span ng-show="val_uname">用户名不合法</span>
           </label>
           <label>
               工资:<input type="number" ng-model="add_salar"   placeholder="请输入工资" /><span ng-show="val_salary">工资不合法</span>
           </label>

           <label>
               生日:<input type="date" ng-model="add_birth" />

           </label>
           <label>
               性别:
               <input type="radio" ng-model="add_sex" value="男" />男

               <input type="radio" ng-model="add_sex" value="女" />女
           </label>

           <label>
               <select ng-model="add_dname">
                   <option value="">-请选择部门-</option>
                   <option>市场部</option>
                   <option>研发部</option>
               </select>
           </label>

           <button ng-click="save()">保存</button>
       </div>

   </body>

</html>