AngularJS

最新推荐文章于 2024-07-11 15:59:35 发布

niu_yue_jiao

最新推荐文章于 2024-07-11 15:59:35 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/niu_yue_jiao/article/details/79780714

版权

<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>
   table {
    text-align: center;
   }

   .red {
    background-color: cornflowerblue;
   }

   .yellow {
    background-color: rosybrown;
   }

   ul li {
    list-style: none;
   }
  </style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <input type="button" ng-click="deleteMore()" value="批量删除" /><br />
   <br />
   <form>
    姓名 : <input type="text" ng-model="name" />     性别 :
    <select ng-init="sex='女'" ng-model="sex">
     <option>男</option>
     <option>女</option>
    </select>     生日 : <input type="date" ng-model="birthday" />     省份 :
    <select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getCitys()">
     <option value="">--请选择省份--</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" ng-click="add()" value="添加" /><br />
   </form>
   <br />
   <table border="1px" width="650px" cellpadding="0" cellspacing="0">
    <tr bgcolor="grey">
     <td><input type="checkbox" ng-model="checkAll" /></td>
     <td>姓名</td>
     <td>性别</td>
     <td>生日</td>
     <td>住址</td>
     <td>操作</td>
    </tr>
    <tr ng-repeat="x in datas" class="{{$index%2?'red':'yellow'}}">
     <td><input type="checkbox" ng-model="checkAll" value="{{$index}}" /></td>
     <td>{{x.name}}</td>
     <td>{{x.sex}}</td>
     <td>{{x.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</td>
     <td>{{x.address}}</td>
     <td>
      <input type="button" ng-click="deleteDatas($index)" value="删除" />
      <input type="button" ng-click="updateDatas(x.name)" value="修改" />
     </td>
    </tr>
   </table>
   <br />
   <div ng-show="updateShow">
    <ul>
     <li> 姓名 : <input type="text" ng-model="upName" /></li>
     <li>性别 : <input type="radio" ng-model="upSex" value="男" />男
      <input type="radio" ng-model="upSex" value="女" />女
     </li>
     <li>生日 : <input type="date" ng-model="upBirthday" /></li>
     <li>住址 : <input type="text" ng-model="upAddress" />
     </li>
     <li><input type="button" ng-click="subUpdate()" value="提交修改" /></li>
    </ul>
   </div>
  </center>
  
  <script>
   /*数组*/
   var datas = [{
    pro: "北京",
    citys: ["海淀", "昌平"]
   }, {
    pro: "广东",
    citys: ["深圳", "广州"]
   }];

    //批量删除
    $scope.deleteMore = function() {
     if($scope.checkAll) {
      $scope.datas = [];
      $scope.checkAll = false;
     } else {
      //获取选中的复选框
      var checked = $("input[type='checkbox']:checked");
      for(var i = checked.length - 1; i >= 0; i--) {
       var c = checked[i].value;
       $scope.datas.splice(c, 1);
      }
     }
    }
    //删除
    $scope.deleteDatas = function(index) {
     $scope.datas.splice(index, 1);
    }
    //修改
    var upData = "";
    $scope.updateDatas = function(xname) {
     //显示修改区域
     $scope.updateShow = true;
     //回显
     for(var i = 0; i < $scope.datas.length; i++) {
      var name = $scope.datas[i].name;
      if(name == xname) {
       upData = $scope.datas[i];
       break;
      }
     }
     $scope.upName = upData.name;
     $scope.upSex = upData.sex;
     $scope.upBirthday = upData.birthday;
     $scope.upAddress = upData.address;
    }
    //点击提交修改
    $scope.subUpdate = function() {
     upData.name = $scope.upName;
     upData.sex = $scope.upSex;
     upData.birthday = $scope.upBirthday;
     upData.address = $scope.upAddress;
     //隐藏修改区域
     $scope.updateShow = false;
    }
    //添加
    $scope.add = function() {
     var addData = {};
     addData.name = $scope.name
     addData.sex = $scope.sex;
     addData.birthday = $scope.birthday;
     addData.address = $scope.pro + "-" + $scope.citys;
     //添加之前先判断合法吗
     if(addData.name == undefined || addData.name.length < 3 || addData.name.length > 30) {
      alert("用户名不合法");
     } else if(addData.sex == undefined) {
      alert("性别未选择");
     } else if(addData.birthday == undefined) {
      alert("请选择生日");
     } else {
      $scope.datas.push(addData);
     }
    }