年龄段查询

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../js/js/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
           $scope.user=[
           {
              id:1,
              uname:"张三",
              pwd:123,
              age:20,
              gender:"男",
              add:false
           }, {
              id:2,
              uname:"李四",
              pwd:123,
              age:13,
              gender:"女",
              add:false
           },
           ];

       //用户名搜索
       $scope.selectUname="";
       //性别搜索
       $scope.selectGender="";
       //年龄查找
       $scope.selectAge="";
       //全选
       $scope.qx=function(){
           for(i in $scope.user){
               $scope.user[i].check=$scope.quanxuan;
           }
       }

       //批量删除
       $scope.deleteUser=function(){
           for (var i = 0; i < $scope.user.length; i++) {
               if($scope.user[i].check==true){
                   $scope.user.splice(i,1);
                   i--;
               }
           }

       }

   //删除全部
   $scope.deleteAll=function(){
       $scope.user=[];
   }





   //新增用户
   $scope.save=function(){
       var newid=$scope.add_id;
       var newuname=$scope.add_uname;
       var newpwd=$scope.add_pwd;
       var newage=$scope.add_age;
       $scope.errors=[];
       if(newid=="" || newid==undefined){
           $scope.errors.push("ID不能为空");
       }
       if(newuname==""||newuname==undefined){
           $scope.errors.push("名称不合法");
       }

       if(newpwd==""||newpwd==undefined){
           $scope.errors.push("密码不合法");
       }
       if(newage.length<=0||newage.length>=100){
           $scope.errors.push("年龄不合法");
       }
       if($scope.errors.length==0){
       var s={
           id:newid,
           uname:$scope.add_uname,
           pwd:$scope.add_pwd,
           age:$scope.add_age,
           gender:$scope.add_gender
       }

       $scope.user.push(s);
       $scope.add_id="";
       $scope.add_uname="";
       $scope.add_pwd="";
       $scope.add_age="";
       $scope.add_gender="";
       $scope.add=false;

       }
   }

   //年龄查询
       $scope.SelectAge=function(age){

           if($scope.select=="" || $scope.select==undefined){
               return true;
           }else{
               var arr=$scope.select.split("-");
               var min=arr[0];
               var max=arr[1];
               if(age>min && age<max){
                   return true;
               }else{
                   return false;
               }
           }

       }


           });

       </script>
       <style>
           tbody tr:nth-child(even){
               background: pink;
           }tbody tr:nth-child(odd){
               background: yellow;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <input placeholder="用户名搜索" ng-model="selectUname"/>

       <select ng-model="select">
           <option value="">年龄查找</option>
           <option>10-15</option>
       </select>
           <select ng-model="selectGender">
               <option value="">---性别查找---</option>
               <option>男</option>
               <option>女</option>
           </select>
           <button ng-click="deleteUser()">批量删除</button>
           <button ng-click="add=true">新增用户</button>
           <button ng-click="deleteAll()">删除全部</button>

           <table border="1px" cellpadding="10" cellspacing="0">
               <thead>
                   <tr>
                       <th><input type="checkbox" ng-click="qx()" ng-model="quanxuan"></th>
                       <th>序号</th>
                       <th>姓名</th>
                       <th>密码</th>
                       <th>年龄</th>
                       <th>性别</th>
                       <th>操作</th>
                   </tr>
               </thead>

               <tbody>
                   <tr ng-repeat="u in user | filter:{uname:selectUname,gender:selectGender}" ng-show="SelectAge(u.age)">
                       <td><input type="checkbox" ng-model="u.check"></td>
                       <td>{{u.id}}</td>
                       <td>{{u.uname}}</td>
                       <td><span ng-hide="update">{{u.pwd}}</span><span ng-show="update"><input type="text" ng-model="u.pwd"><button ng-click="update=false">保存</button></span></td>
                       <td>{{u.age}}</td>
                       <td>{{u.gender}}</td>
                       <td><button ng-click="update=true">修改密码</button></td>
                   </tr>
               </tbody>
           </table>
       </center>
       <div ng-show="add">
               <input placeholder="请输入id" ng-model="add_id"/><br>
               <input placeholder="请输入用户名" ng-model="add_uname"/><br>
               <input placeholder="请输入密码" ng-model="add_pwd"/><br>
               <input placeholder="请输入年龄" ng-model="add_age"/><br>
               <select ng-model="add_gender">
                   <option value="">--请选择性别--</option>
                   <option>男</option>
                   <option>女</option>
               </select>
               
               <button ng-click="save()">保存</button>
           </div>
           <p ng-show="errors!=0" ng-repeat="e in errors">{{e}}</p>
   </body>
</html>

猜你喜欢