二级联动

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

刘书门第

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

阅读量162

点赞数

本文链接：https://blog.csdn.net/qq_41442084/article/details/80046203

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="libs/angular.min.js" ></script>
<script type="text/javascript" src="libs/jquery-1.11.0.min.js" ></script>
<script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    /* 给下拉列表框 ng-molde='sex'*/
    $scope.datas=[{name:'张三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' },
    {name:'李四',sex:'男',birth:new Date('1995-05-24'),addres:'北京-西二旗' },
    {name:'王三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' }
    ];
    /*删除 i就是删除者调用的时候给的标记 */
    $scope.del = function(i){
     var b = confirm("是否删除？！");
     /*如果选中确定,执行删除*/
     if(b){
      $scope.datas.splice(i,1);
     }
    }

    //添加的业务逻辑
    $scope.save = function(){
     var v_name = $scope.uname;
     var sex = $scope.sex;
     var birth = $scope.birth;
     var address = $scope.pro+"-"+$scope.citys;

     $scope.errors = [];//存放错误信息的数组

     if(v_name==undefined || v_name.length<3 || v_name.length>30){
      $scope.errors.push("用户名不合法");
     }
     if(sex==undefined){
      $scope.errors.push("性别不能为空");
     }
     //添加数据到表格里面
     if($scope.errors.length==0){
      $scope.datas.push({name:v_name, sex:sex, birth:birth, addres:address});
     }
    }

    //改编的之前的批量删除
    $scope.delAll = function(){
     var dd = $("input[type=checkbox]:checked");
     for (var i = dd.length-1; i >= 0 ; i--) {
      $scope.datas.splice(dd[i].value,1);
     }
    }

   })
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="button" value="批量删除" ng-click="delAll()" />
<form>
   姓名：<input type="text" ng-model="uname" />
          性别：<select ng-init="sex='男'" ng-model="sex">
           <option>男</option>
           <option>女</option>
          </select>
      生日：<input type="date" ng-model="birth" />
      住址：<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getcitys()">
       <option value="">---请选择省份---</option>
       <option>北京</option>
       <option>河北</option>
       <option>河南</option>
      </select>
      城市：<select id="city" ng-model="citys" ng-init="citys='昌平'">
       <option value="">---请选择城市---</option>
       <option>海淀</option>
       <option>昌平</option>
      </select>
      <input type="button" value="保存" ng-click="save()" />
</form>

<div>
   <ul>
    <li ng-repeat="e in errors">{{e}}</li>
   </ul>
</div>
<table border="1px">
   <tr>
    <td><input type="checkbox" ng-model="checkAll" ></td>
    <td>姓名</td>
    <td>性别</td>
    <td>生日</td>
    <td>住址</td>
    <td>操作</td>
   </tr>
   <tr ng-repeat="n in datas">
    <td><input type="checkbox" ng-model="checkAll" value="{{$index}}"></td>
    <td>{{n.name}}</td>
    <td>{{n.sex}}</td>
    <td>{{n.birth|date:"yyyy-MM-dd日 hh:mm:ss"}}</td>
    <td>{{n.addres}}</td>
    <td>
     <input type="button" value="删除" ng-click="del($index)">
    </td>
   </tr>
</table>

</body>

<script>
//数组
var datas=[{pro:"北京",citys:["海淀","昌平"]},{pro:"河北",citys:["石家庄","张家口"]},{pro:"河南",citys:["安阳","濮阳"]}];
function getcitys(){
   //把之前的城市数据清空
   $("#city option").remove();
   var data_citys=[];//存放选择省份对应的城市
   //获取当前选择的省份
   var p = $("#pro").val();/*p的值是下拉列表框选择的城市 */
   for (var i in datas) {
    if(datas[i].pro==p){
     datas_citys=datas[i].citys;
     break;
    }
   }
   //根据datas_city数组的内容
   //2.把城市封装到option 把option添加到城市的select
   for (var i in datas_citys) {
    var op = $("<option>"+datas_citys[i]+"</option>")
    $("#city").append(op);
   }
}
</script>
</html>

刘书门第

关注

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="libs/angular.min.js" &gt
复制链接

扫一扫