AngularJS实现增删改查数据/排序功能

来源：互联网发布：tor browser mac 编辑：程序博客网时间：2024/06/07 13:11
<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>综合练习</title>      <style>         .addUser{            width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;         }      </style>      <script type="text/javascript" src="AngularJS/angular.js" ></script>      <script type="text/javascript" src="AngularJS/angular-route.js" ></script>      <script type="text/javascript">         var app = angular.module("myApp",["ngRoute"]);         //定义路由规则         app.config(["$routeProvider",function($routeProvider){            $routeProvider               .when("/addUser",{//添加用路由地址                  controller:"addCtrl",                  templateUrl:"addUser.html"               })               .when("/updatePwd/:name",{//修改密码用路由地址                  controller:"updateCtrl",                  templateUrl:"updatePwd.html"               })               .otherwise({redirectTo:"/addUser"});         }]);         app.controller("myCtrl",function($scope,$location){            $scope.users = [               {"id":1,"name":"张三","pwd":"123","age":22,"sex":"男","state":false},               {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女","state":false},               {"id":3,"name":"王五","pwd":"789","age":44,"sex":"男","state":false}            ];            //给按钮添加点击事件，根据传过来的参数，判断跳转到的路由地址            $scope.goToPath = function(path){               alert(path);               $location.path(path);            }            //全部删除功能            $scope.deleteAll = function () {               alert("确认全部删除吗?");               $scope.users = [];                }                //全选功能                $scope.checkAll = false;            $scope.All = function () {               //当点击全选按钮时,实现全选               for(var i=0;i<$scope.users.length;i++){                        if($scope.checkAll){                            $scope.users[i].state = true;                        }else{                            $scope.users[i].state = false;                        }               }                }                //全选功能的判断            $scope.Acheck = function () {                    var flag = 0;                    for(var i=0;i<$scope.users.length;i++){                        if($scope.users[i].state){                            flag++;                        }                    }                    if(flag == $scope.users.length){                        //实现全选按钮选中                        $scope.checkAll = true;                    }else{                        $scope.checkAll = false;                    }                }                //批量删除                $scope.piDelete = function () {                confirm("确定批量删除吗?");                    for(var i=0;i<$scope.users.length;i++) {                       if($scope.users[i].state){                           $scope.users.splice(i,1);                           i--;                  }                    }                }                //判断年龄范围                $scope.size = "--请选择--";                $scope.ageSize = function(age,size){                    if(size == "--请选择--"){                        return true;                    }else{                        var arr = size.split("-");                        var ageMin = arr[0];                        var ageMax = arr[1];                        if(age>ageMin && age<ageMax){                            return true;                        }else{                            return false;                        }                    }                }                //判断年性别范围                $scope.sex1 = "--请选择--";                $scope.sexSize = function(sex,sex1){                    if(sex1 == "--请选择--"){                        return true;                    }else{                        if($scope.sex1 == sex){                            return true;                  }else{                            return false;                  }                    }                }         });         //添加用户控制器         app.controller("addCtrl",function($scope){            $scope.name = "";//双向数据绑定，获得页面输入的新用户信息            $scope.pwd = "";            $scope.age = "";            $scope.sex = "";            $scope.sub = function(){               //遍历数据源，拿到最大的用户id               $scope.idMax = 0;               for(index in $scope.users){                  if($scope.users[index].id > $scope.idMax){                     $scope.idMax = $scope.users[index].id;                  }               }               //创建新用户对象               var user = {                  id:$scope.idMax+1,                  name:$scope.name,                  pwd:$scope.pwd,                  age:$scope.age,                  sex:$scope.sex               };               //把新获得的用户对象添加到数据库数组中               $scope.users.push(user);            }         });         //修改密码控制         app.controller("updateCtrl",function($scope,$routeParams){            var name = $routeParams.name;//获得要修改的用户的用户名            $scope.name = name;//将要修改用户的名字，赋值给双向数据绑定的页面用户名显示。            $scope.pwd1 = "";//双向数据绑定用户输入的新密码                        //点击修改密码按钮，执行修改密码方法            $scope.updatePwd = function(){               //遍历数据源，通过比较数据源中用户名跟参数要修改的用户名一致，进行密码修改               for(index in $scope.users){                  if($scope.users[index].name == name){                     //获得用户输入的密码，赋值给当前用户要修改的新密码。                     $scope.users[index].pwd = $scope.pwd1;                  }               }            }         });      </script>   </head>   <body ng-app="myApp" ng-controller="myCtrl">      <center>         <h3>用户信息表</h3>         <div>            <input placeholder="用户名查询" size="10" ng-model="name"/>&nbsp;            <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->            年龄：<select id="age" ng-model="size">               <option>--请选择--</option>               <option>11-20</option>               <option>21-30</option>               <option>31-40</option>               <option>41-50</option>               <option>51-60</option>            </select>&nbsp;            性别：<select ng-model="sex1">               <option>--请选择--</option>               <option>男</option>               <option>女</option>            </select>&nbsp;            <input type="button" value="全部删除" ng-click="deleteAll()"/>            <input type="button" value="批量删除" ng-click="piDelete()"/>         </div><br />         <div>            <table border="1" cellspacing="1" cellpadding="10">               <thead>                  <tr>                     <th><input type="checkbox" ng-model="checkAll" ng-click="All()"/> </th>                     <th>id</th>                     <th>用户名</th>                     <th>密码</th>                     <th>年龄</th>                     <th>性别</th>                     <th>操作</th>                  </tr>               </thead>               <tbody>                  <tr ng-repeat="user in users | filter:{name:name}" ng-if="ageSize(user.age,size)" ng-show="sexSize(user.sex,sex1)">                     <td><input ng-model="user.state" type="checkbox" ng-click="Acheck()"/></td>                     <td>{{user.id}}</td>                     <td>{{user.name }}</td>                     <td>{{user.pwd}}</td>                     <td>{{user.age }}</td>                     <td>{{user.sex}}</td>                     <td><button ng-click="goToPath('/updatePwd/'+user.name)">修改密码</button> </td>                  </tr>               </tbody>            </table>         </div><br />         <button class="addUser" ng-click="goToPath('/addUser')">添加用户</button><br /><br />                           <!-- 1.添加用户页面 -->         <script type="text/ng-template" id="addUser.html">            <form action="">               <table border="1" cellspacing="1" cellpadding="10">                  <tr>                     <th>用户名：</th>                     <td><input ng-model="name" placeholder="请输入用户名" /></td>                  </tr>                  <tr>                     <th>密　码：</th>                     <td><input ng-model="pwd" placeholder="请输入密码" /></td>                  </tr><tr>                     <th>年　龄：</th>                     <td><input ng-model="age" placeholder="请输入年龄" /></td>                  </tr><tr>                     <th>性　别：</th>                     <td><input ng-model="sex" placeholder="请输入性别" /></td>                  </tr>                  <tr align="center">                     <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>                  </tr>               </table>            </form>         </script>         <!-- 2.修改用户信息页面 -->         <script type="text/ng-template" id="updatePwd.html">            <form>               <table border="1" cellspacing="1" cellpadding="10">                  <tr>                     <th>用户名：</th>                     <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>                  </tr>                  <tr>                     <th>旧密码：</th>                     <td><input ng-model="oldPwd" placeholder="请输入密码" /></td>                  </tr><tr>                     <th>新密码：</th>                     <td><input ng-model="pwd1" placeholder="请输入年龄" /></td>                  </tr><tr>                     <th>确　认：</th>                     <td><input ng-model="pwd2" placeholder="请输入性别" /></td>                  </tr>                  <tr align="center">                     <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>                  </tr>               </table>            </form>         </script>         <!-- 6.指定相应内容 -->         <div ng-view>                     </div>      </center>   </body></html>
阅读全文
0 0