混合开发综合练习

最新推荐文章于 2021-05-31 14:49:19 发布

ch5211314

最新推荐文章于 2021-05-31 14:49:19 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/ch5211314/article/details/79793877

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="libs/angular.min.js"></script>
       <script src="libs/jquery-1.11.0.min.js"></script>
       <style>
           .yel{
               background: red;
           }
           .jr{
               background: tomato;
           }
       </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <input type="text" ng-model="mh" placeholder="输入关键字" />
       <select ng-model="ord">
           <option value="rq">正序</option>
           <option value="-rq">倒序</option>
       </select>
       <input type="button" value="入库" ng-click="showapp=!showapp" />
       <div ng-show="showapp">
       <input type="text" placeholder="输入名字" ng-model="name" />
       <span ng-show="na">名字不对</span><br />
       <select ng-model="sex">
           <option>男</option>
           <option>女</option>
       </select><br />
       日期：<input type="date" ng-model="rq" /><br />
       城市：<select ng-init="cheng=p[0]" ng-model="cheng" ng-options="p.pro for p in pros" ng-change="gai(cheng)">
           <option>请选择</option>
       </select><br />
       县：<select ng-init="shi=p" ng-model="shi" ng-options=" p for p in citys">
           <option>请选择</option>
       </select>
       <input type="button" value="提交" ng-click="tj()" />
       </div>
       <table border="1">
       <tr>
           <td><input type="checkbox" ng-model="checkall"/></td>
           <td>用户</td>
           <td>性别</td>
           <td>日期</td>
           <td>住址</td>
           <td>操作</td>
       </tr>
       <tr ng-repeat="x in names | filter:mh |orderBy:ord" class="{{$index%2?'yel':'jr'}}">
           <td><input type="checkbox" ng-model="checkall" value="{{$index}}" /></td>
           <td>{{x.name}}</td>
           <td>{{x.sex}}</td>
           <td>{{x.rq}}</td>
           <td>{{x.zhuzhi}}</td>
           <td><input type="button" value="删除" ng-click="sc(x.name)"/></td>
       </tr>
       </table>
       <input type="button" ng-click="pl()" value="批量删除" />
       <script>
           angular.module("myapp",[]).controller("myctrl",function($scope,$http){
   $http.get("mydata.json").then(function(response){
       $scope.names=response.data;

   })

   $scope.na=false;
   $scope.pros=[{pro:"北京",childer:["西二旗","朝阳"]},{pro:"河北省",childer:["石家庄","邯郸"]}];
   $scope.citys=$scope.pros[0].childer;
   $scope.gai=function(s){
       $scope.citys=s.childer;
   }
    $scope.tj=function(){
       var name=$scope.name;
       var sex=$scope.sex;
       var rq=$scope.rq;
       var zhuzhi=$scope.cheng.pro+$scope.shi;
       if (name==null || name.length<3 || name.length>30 ) {
           $scope.na=true;
           return;
       } else {
               $scope.na=false;
               $scope.names.push({name:name,sex:sex,rq:rq,zhuzhi:zhuzhi});
       }

    }

    $scope.sc=function(id){
       $scope.names.splice(id,1);

    }
   $scope.pl=function(){
    if($scope.checkall){
        $scope.names=[];
    }else{
        var check=$("input[type=checkbox]:checked");
        for (var i = check.length-1; i >=0; i--) {
            $scope.names.splice(check[i].value,1);
        }
    }


   }
           })

       </script>
   </body>
</html>