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

最新推荐文章于 2018-03-30 13:04:23 发布
Android丶ztz
最新推荐文章于 2018-03-30 13:04:23 发布
阅读量489
点赞数
分类专栏： AngularJS
本文链接：https://blog.csdn.net/TianzhuZ/article/details/78312662
版权
AngularJS 专栏收录该内容
9 篇文章 0 订阅
订阅专栏
<!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>