哦呵呵

原创于 2018-04-03 12:06:14 发布 · 319 阅读

本内容遵循CC 4.0 BY-SA版权协议

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   span{
    color: red;
   }
  </style>
</head>
<script src="js/angular.min.js"></script>
<script>
  angular.module("list",[]).controller("con",function($scope){

   $scope.datas=[{id:1,name:"曹操",password:"123456",level:"1",address:"北京-海淀",birthday:new Date('2017-10-01 10:00:00')},
   {id:1,name:"刘备",password:"123456",level:"1",address:"河北-石家庄",birthday:new Date('2017-10-03 10:00:00')},
   {id:1,name:"司马懿",password:"123456",level:"2",address:"河北-承德",birthday:new Date('2017-10-04 10:00:00')},
   {id:1,name:"孙权",password:"123456",level:"2",address:"北京-邯郸",birthday:new Date('2017-10-02 10:00:00')}];
   $scope.delAll=function(){
    for (var i=0;i<$scope.datas.length;i++) {
     if ($scope.datas[i].ck) {
      $scope.datas.splice(i,1);i--;
     }
    }


   }
   $scope.add=function(){
    var id=$scope.id;

    var name=$scope.name;
    var password=$scope.password;
    var level=$scope.level;
    var address=$scope.address+"-"+$scope.city;
    var birthday=$scope.birthday;
    if($scope.id==""||$scope.id==null){
     $scope.i=true;
    }
    if($scope.name==""||$scope.name==null){
     $scope.n=true;
    }
    if($scope.password==""||$scope.password==null){
     $scope.p=true;
    }
    if($scope.level==""||$scope.level==null){
     $scope.l=true;
    }
    if($scope.birthday==""||$scope.birthday==null){
     $scope.b=true;


    }else{
     $scope.i=false;
     $scope.n=false;
     $scope.p=false;
     $scope.l=false;
     $scope.ass=false;
     $scope.birthday=new Date();
     $scope.datas.push({id:id,name:name,password:password,level:level,address:address,birthday:birthday});
     $scope.a=false;
    }

   }
   $scope.qx=function(){
    for (var i in $scope.datas) {

      $scope.datas[i].ck=$scope.id;


    }
   }
   $scope.sel=function(){
    $scope.text=$scope.text1;
    $scope.ji=$scope.ji1;

   }


  })



</script>
<body ng-app="list" ng-controller="con">
  {{datas}}
  <center>
   <input type="text" ng-model="text" placeholder="用户名搜索" />
   <select ng-model="ji">
    <option value="">选择级别</option>
    <option>1</option>
    <option>2</option>
   </select>
   <br />
   <input type="button" value="新增用户" ng-click="a=true"/>
   <input type="button" ng-click="delAll()" value="批量删除" />
   <select ng-model="px">
    <option value="">--请选择排序--</option>
    <option value="+id">编号正序排序</option>
    <option value="-id">编号倒序排序</option>
    <option value="+level">级别正序排序</option>
    <option value="-level">级别倒序排序</option>
   </select>
    <table border="1" cellspacing="0" width="700">
    <tr>
    <th><input type="checkbox" ng-click="qx()" ng-model="id"></th>
    <th>编号</th>
    <th>用户名</th>
    <th>密码</th>
    <th>级别</th>
    <th>地址</th>
    <th>创建时间</th>
    <th>操作</th>
    </tr>
    <tr ng-repeat="i in datas | filter:{name:text,level:ji} | orderBy:px">
    <th><input type="checkbox" ng-model="i.ck"></th>
    <th>{{i.id}}</th>
    <th>{{i.name}}<input ng-model="i.name" ng-show="f" ng-blur="f=false"></th>
    <th>{{i.password}}</th>
    <th>{{i.level}}</th>
    <th>{{i.address}}</th>
    <th>{{i.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</th>
    <th><button ng-click="f=true">修改</button></th>
    </tr>
    </table>
    <form ng-show="a">
    编号<input type="text" ng-model="id" /><span ng-show="i">*id不能为空</span><br />
    用户名<input type="text" ng-model="name" /><span ng-show="n">*用户名不能为空</span><br />
    密码<input type="text" ng-model="password" /><span ng-show="p">*密码不能为空</span><br />
    级别<select ng-model="level">
      <option value="">--请选择级别--</option>
      <option>1</option><option>2</option>
    </select><span ng-show="l">*级别不能为空</span><br />
    地址<select id="sheng" ng-model="address" onchange="dj()">
      <option value="">--请选择省份--</option>
      <option>北京</option>
      <option>河北</option>
    </select>
      市<select id="shi" ng-model="city">
      <option value="">--请选择城市--</option>

    </select>
    日期<input type="date" ng-model="birthday" /><span ng-show="b">*日期不能为空</span><br />
    <input type="submit" value="保存添加" ng-click="add()" />
    </form>

  </center>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>

  function dj(){
    var citys=[{sheng:"北京",si:["海淀","昌平"]},{sheng:"河北",si:["石家庄","承德","邯郸"]}];
    var ids=$("#sheng").val();
    var k=[];
    for (var i=0;i<citys.length;i++) {
     if(ids==citys[i].sheng){
      k=citys[i].si;
     }
    }
    $("#shi option").remove();
    for(var i=0;i<k.length;i++){
     var op=$("<option>"+k[i]+"</option>");
     $("#shi").append(op);

    }

   }

</script>
</html>