二级联动

最新推荐文章于 2019-10-11 10:56:31 发布

凉介魏

最新推荐文章于 2019-10-11 10:56:31 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42191634/article/details/80338345

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script>
   var app = angular.module("myApp", []);
   app.controller("myctr", function($scope) {
    i = 0;
    //定义省份
    $scope.pros = [{
     pro: "北京",
     children: ["西二旗", "上地"]
    }, {
     pro: "河北",
     children: ["石家庄", "邯郸"]
    }];
    $scope.citys = $scope.pros[0].children;
    //改变城市下拉菜单的数据源;
    $scope.changcity = function(pro) {
     $scope.citys = pro.children;
    }
    $scope.stu = [{
     name: "张a",
     sex: "男",
     rq: new Date("1998-9-" + (i + 1)),
     zhuzhi: "北京西二旗"
    }, {
     name: "张b",
     sex: "男",
     rq: new Date("1998-9-" + (i + 1)),
     zhuzhi: "北京西二旗"
    }, {
     name: "张c",
     sex: "男",
     rq: new Date("1998-9-" + (i + 1)),
     zhuzhi: "北京西二旗"
    }, {
     name: "张d",
     sex: "男",
     rq: new Date("1998-9-" + (i + 1)),
     zhuzhi: "北京西二旗"
    } ];

    //添加
    $scope.add = function() {
     $scope.stu.push({
      name: $scope.n,
      sex: $scope.sex,
      rq: $scope.r,
      zhuzhi: $scope.s1.pro + $scope.s2
     })
    }
    //批量删除
    $scope.del = function() {
     //遍历数组
     for(var i = 0; i < $scope.stu.length; i++) {
      if($scope.stu[i].ck) {
       $scope.stu.splice(i, 1);
       i--;
      }
     }
    }

    //全选
    $scope.checkAll = function() {
     for(var i = 0; i < $scope.stu.length; i++) {
      $scope.stu[i].ck = $scope.flag;
     }
    }
    //全选
    $scope.checkAll = function() {
     for(var i = 0; i < $scope.stu.length; i++) {
//      $scope.stu[i].ck = $scope.flag;
      $scope.stu[i].ck = !$scope.stu[i].ck;
     }
    }
    //删除
    $scope.sc = function(i) {
     $scope.stu.splice(i, 1);
    }
   })
  </script>
</head>

姓名:<input type="text" placeholder="请输入姓名" ng-model="n" /> 性别:
<select ng-model="sex">

<option>男</option>
   <option>女</option>
  </select>
  生日:<input type="date" ng-model="r" />
  


  住址：
  <select ng-init="s1=pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="changcity(s1)">
   <option value="">--请选择省份--</option>

  </select>

  市：
  <select ng-init="s2=citys[0]" ng-model="s2" ng-options="c for c in citys">
   <option value="">--请选择城市--</option>
  </select>
  <button style="background: lawngreen;" ng-click="add()">添加</button><br>
  <button type="checkbox" ng-click="checkAll()" >全选/反选</button>
  <button style="background-color: chartreuse ;" ng-click="del()">批量删除</button></span>
  <br>
  <table border="1px">
   <tr>
    <td><input type="checkbox" ng-model="flag" ng-click="checkAll()" /></td>
    <td>姓名</td>
    <td>性别</td>
    <td>生日</td>
    <td>住址</td>
    <td>操作</td>
   </tr>
   <tr ng-repeat=" s in stu">
    <td><input type="checkbox" ng-model="s.ck" /></td>
    <td>{{s.name}}</td>
    <td>{{s.sex}}</td>
    <td>{{s.rq | date:'MM-dd hh:mm'}}</td>
    <td>{{s.zhuzhi}}</td>
    <td><button ng-click="sc($index)">删除</button></td>
   </tr>
  </table>

</body>

</html>