实现添加删除排序修改

来源：互联网发布：软件概要设计说明书编辑：程序博客网时间：2024/05/21 22:34

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>实现数组随机排序</title>
       <style>
           #mydiv{
               width: 550px; height:200px; background-color: #fff;
           }
           a{text-decoration: none;}
       </style>
       <script type="text/javascript" src="js/angular-1.5.5/angular.js"></script>
       <script src="js/angular-1.5.5/angular-route.js"></script>
       <script type="text/javascript">
           var app = angular.module("myApp", ["ngRoute"]);
               app.config(["$routeProvider",function($routeProvider){
                            //alert("ssss");
                            $routeProvider
                            .when("/add",{
                                controller : "myadd",
                                templateUrl:"adduser.html"})

                            .when("/updata/:name",{
                                controller : "myupdata",
                                templateUrl:"updatauser.html"})
                            .otherwise({redirectTo:"/add"});
                         }]);
                 //修改控制器
                app.controller("myupdata", function($scope,$routeParams) {
                   $scope.name = $routeParams.name;
                   //alert($scope.name);
                    $scope.oldpwd = "";
                    $scope.newpwd = "";
                    $scope.connewowd = "";

                    $scope.but = function(){

                        for(index in $scope.users){
                           if($scope.users[index].name == $scope.name){
                               $scope.users[index].pwd = $scope.newpwd ;
                           }
                        }

                        $scope.name ="";
                        $scope.oldpwd = "";
                        $scope.newpwd = "";
                        $scope.connewowd = "";
                   }

               });

                //添加控制器
                app.controller("myadd", function($scope) {
                    $scope.name = "";
                   $scope.pwd = "";
                   $scope.age = "";
                   $scope.sex = "";

                   $scope.but = function(){
                     //alert("sd");
                   var newUser = {
                       id:$scope.users.length + 1,
                       name:$scope.name,
                       pwd:$scope.pwd,
                       age:$scope.age,
                       sex:$scope.sex
                   }
                   //添加新用户.
                   $scope.users.push(newUser);
                      $scope.name = "";
                      $scope.pwd = "";
                      $scope.age = "";
                      $scope.sex = "";
                   }
               });
                //主控制器
               app.controller("myCtrl", function($scope) {
                    $scope.users = [
                                     {id:1,name:"a",pwd:"111",age:12,sex:"男",state:false},
                                     {id:2,name:"b",pwd:"222",age:23,sex:"男",state:false},
                                     {id:3,name:"c",pwd:"333",age:34,sex:"女",state:false},
                                     {id:4,name:"d",pwd:"444",age:45,sex:"女",state:false},
                                     {id:5,name:"e",pwd:"555",age:56,sex:"女",state:false}
                    ];

                   $scope.title = 'name';
                   $scope.desc = 0;
                   $scope.key = '';
                   $scope.ageSize = "";
                   $scope.setSex = "";

                   $scope.myorderBy = function(name){
                          $scope.title = name;
                          $scope.desc = !$scope.desc;
                   };

                   //删除
                   $scope.deleteall = function(){
                          //alert("sss");
                          $scope.users.splice($scope.users);
                   };

                   $scope.ageTest = function(age,ageSize){

                          if(ageSize != "--年龄范围查询--"){
                       var ages = ageSize.split("~");
                       var ageMin = ages[0];
                       var ageMax = ages[1];
                       if( age<ageMin || age>ageMax ){
                           return false;
                       }else{
                           return true;
                       }
                   }else{
                       return true;
                   }

                   };



                   //批量删除
               $scope.deleteSel = function(){
                   var userNames = [];
                   //遍历users数组，获取状态是选中的user对象的名字
                   for(index in $scope.users){
                       if($scope.users[index].state == true){
                           userNames.push($scope.users[index].name);
                       }
                   }

                   if(userNames.length>0){
                       if(confirm("是否删除选中项？")){
                           for(i in userNames){
                               var name = userNames[i];
                               for(i2 in $scope.users){
                                   if($scope.users[i2].name == name){
                                       $scope.users.splice(i2,1);
                                   }
                               }
                           }
                       }
                   }else{
                       alert("请选择删除项");
                   }
               }

                //全选反选
                $scope.selectAll = false;
               $scope.all = function(m) {
                   for(var i = 0; i < $scope.users.length; i++) {
                       if(m === true) {
                           $scope.users[i].state = true;
                       } else {
                           $scope.users[i].state = false;
                       }
                   }
               };


               });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
      <center>
       <form>
          <table border="1" style="text-align: center;" width="600">
             <tr>
                 <th colspan="3">
                 <input type="text" ng-model="key" placeholder="请输入姓名关键字" />
                 </th>
                 <th>
                     <select ng-model="ageSize" ng-init="ageSize ='--年龄范围查询--'">
                         <option>--年龄范围查询--</option>
                         <option>10~20</option>
                         <option>21~30</option>
                         <option>31~100</option>
                     </select>
                 </th>
                 <th>
                     <select ng-model="setSex" >
                         <option value="">--性别--</option>
                         <option >男</option>
                         <option >女</option>
                     </select>
                 </th>
                 <th>
                     <input type="button" value="全部删除" ng-click="deleteall()" />
                      <input ng-click="deleteSel()" type="button" value="批量删除" />
                 </th>

             </tr>
                <tr>
                 <th><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></th>
                 <th ng-click="myorderBy('id')" >id</th>
                 <th ng-click="myorderBy('name')" >用户名</th>
                 <th ng-click="myorderBy('pwd')" >密码</th>
                 <th ng-click="myorderBy('age')" >年龄</th>
                 <th ng-click="myorderBy('sex)" >性别</th>
                 <th >操作</th>
                </tr>
                
                <tr ng-repeat="u in users | filter:setSex |filter: {name: key} | orderBy: title : desc" ng-if="ageTest(u.age,ageSize)">
                  <td><input ng-model="u.state" type="checkbox" ng-checked="selectAll" /></td>
                  <td>{{u.id}}</td>
                  <td>{{u.name}}</td>
                  <td>{{u.pwd}}</td>
                  <td>{{u.age}}</td>
                  <td>{{u.sex}}</td>
                  <td>
                     <a href="#/updata/{{u.name}}" ><input type="button" value="修改密码" /></a>
                  </td>
                </tr>
          </table>
         <a href="#/add"><input type="button" value="添加用户"   style="margin-right: 480px;"/></a>
          <div id="mydiv" ng-view >


          </div>

       </form>

   </center>
         
         <script type="text/ng-template" id="adduser.html">
            <div>
                <form>
                姓名  : <input type="text" name="name" id="name" ng-model="name" />        <br /><br />
                密码  : <input type="text" id="pwd" ng-model="pwd" />                      <br /><br />
                年龄  : <input type="number" id="age" ng-model="age" />
                                                                                                    <br /><br />
                                    性别:<input type="radio" value="女"     name="sex" ng-model="sex" /> 女   
                    <input type="radio" value="男" name="sex" ng-model="sex" /> 男
                                                                                                  <br /><br />
                   <input type="button" value="提交" ng-click="but()" />
                </form>
            </div>
         </script>

         
         <script type="text/ng-template" id="updatauser.html">
            <div>
                <form>
                用户名  : <input type="text" id="name"   ng-model="name"/><br /><br />
                旧密码  : <input type="text" id="oldpwd" ng-model="oldpwd" /><br /><br />
                新密码  : <input type="text" id="newpwd" ng-model="newpwd" /><br /><br />
                                                                      确认密码:<input type="text" id="connewowd" ng-model="connewowd" /><br /><br />
                <input type="button" value="提交" ng-click="but()" />
                </form>
            </div>
         </script>

   </body>

</html>

阅读全文

0 0