二级联动

最新推荐文章于 2020-08-09 22:33:23 发布

qq_41880285

最新推荐文章于 2020-08-09 22:33:23 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/qq_41880285/article/details/79836969

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../day0403/js/angular.min.js" ></script>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script>
   angular.module("list",[]).controller("demo1",function($scope){
    $scope.datas=[{id:'1',name:'曹操',password:'123456',jibie:'3',address:'北京-海淀',time:'2017-10-01 10:00:00'},{id:'2',name:'刘备',password:'123456',jibie:'1',address:'河北-石家庄',time:'2017-10-03 10:00:00'},{id:'3',name:'司马懿',password:'123456',jibie:'1',address:'河北-承德',time:'2017-10-02 10:00:00'}];
  //批量删除
  $scope.delAll=function(){

     for(var i=0;i<$scope.datas.length;i++){
      if ($scope.datas[i].c){
       $scope.datas.splice(i,1);
       i--;
      }
     }
    }
   $scope.xz=function(){
     //alert("-");
     var id=$scope.id;
     var name=$scope.name;
     var password=$scope.password;
     var jibie=$scope.jibie;
     var sheng=$scope.sheng;
     var shi=$scope.shi;
     var time=new Date();
     //alert(id);
     if(id==null||id==""){
      alert("id不能为空");
     }else if(name==null||name==""){
      alert("name不能为空");
     }else if(password==null||password==""){
      alert("password不能为空");
     }else if(jibie==null||jibie==""){
      alert("jb不能为空");
     }else{
      $scope.datas.push(
       {id:id,name:name,password:password,jibie:jibie,address:sheng+"-"+shi,time:time}
      );
     }

    }

   $scope.sel=function(){
     $scope.sname1=$scope.sname;
     $scope.stel1=$scope.stel;
     $scope.ss1=$scope.ss;
    }
   $scope.qx=function(){
     //全选
     for(var i=0;i<$scope.datas.length;i++){
      $scope.datas[i].c=$scope.ck;

     }
    }


   })


  </script>
  <style>
   tr:nth-child(2n+1){
    background: pink;
   }
   tr:nth-child(2n){
    background: #00BFFF;
   }

   .myborder{
    border: 1px solid red;
   }
  </style>
</head>
<body ng-app="list" ng-controller="demo1">
  <input ng-model="name1" placeholder="用户名搜索"/>

  <select ng-model="jibie1" >
   <option value="">选择级别</option>
   <option>1</option>
   <option>2</option>
  </select>

  <select ng-model="px" >
   <option value="">排序</option>
   <option value="+id">id正序排列</option>
   <option value="-id">id倒序排列</option>
   <option value="+jibie">级别正序</option>
   <option value="-jibie">级别倒序</option>
   <option value="+time">时间正序</option>
   <option value="-time">时间倒序</option>
  </select>

  <button ng-click="xzshow=true">新增用户</button>
  <button ng-click="delAll()">批量删除</button>
  <table border="1px">
   <tr>
    <td><input type="checkbox" ng-model="ck" ng-click="qx()"></td>
    <td>id</td>
    <td>用户名</td>
    <td>密码</td>
    <td>级别</td>
    <td>地址</td>
    <td>时间</td>
    <td>操作</td>
   </tr>
   <tr ng-repeat="d in datas|filter:{name:name1,jibie:jibie1}|orderBy:px"">
    <td><input type="checkbox" ng-model="d.c"/></td>
    <td>{{d.id}}</td>
    <td>{{d.name}}</td>
    <td><span ng-hide="isshow">{{d.password}}</span><input ng-model="d.password" ng-show="isshow" ng-blur="isshow=false"></td>
    <td>{{d.jibie}}</td>
    <td>{{d.address}}</td>
    <td>{{d.time|date:"yyyy-MM-dd hh:mm:ss"}}</td>
    <td>
     <button ng-click="isshow=true">修改密码</button>
    </td>
   </tr>
  </table>
  <form ng-show="xzshow">
   ID:<input ng-model="id" ng-class="{myborder:id==null||id==''}"/>{{srrors.id}}<br />
   用户名:<input ng-model="name" ng-class="{myborder:name==null||name==''}" />{{errors.name}}<br />
   密码:<input ng-model="password" /><br />
   级别:<input ng-model="jibie" /><br />
   时间:<input ng-model="time" /><br />
   省份:
     <select ng-model="sheng" id="sheng1" οnchange="getCity()">
      <option>北京</option>
      <option>河北</option>
      <option>河北</option>
     </select>
     <br />
     城市:<select ng-model="shi" id="shi1"></select>

     <br />
     <button ng-click="xz()">新增</button>

  </form>
  <script>
  var shengs=[
   {sheng:"河南",shi:["安阳","洛阳","信阳"]},
   {sheng:"北京",shi:["朝阳","昌平","海淀"]},
   {sheng:"河北",shi:["石家庄","邯郸","承德"]}
  ];
  var city=[];
  function getCity(){
   for(var i=0;i<shengs.length;i++){
    var sheng1=$("#sheng1").val();
    if(shengs[i].sheng==sheng1){
     city=shengs[i].shi;
    }
   }
   //alert(city);
   $("#shi1 option").remove();
   for(var i=0;i<city.length;i++){
    var op=$("<option>"+city[i]+"</option>")
    $("#shi1").append(op);
   }
  }
</script>

</body>
</html>

qq_41880285

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级联动

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="../day0403/js/angular.min.js&quot
复制链接

扫一扫