angularjs 表格的增删改查

最新推荐文章于 2019-04-09 21:58:02 发布

dreamflylb

最新推荐文章于 2019-04-09 21:58:02 发布

阅读量1k

点赞数

分类专栏：混合开发

本文链接：https://blog.csdn.net/dreamflylb/article/details/78312905

版权

混合开发专栏收录该内容

5 篇文章 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);
            }
         });
         //添加用户控制器
         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" />&nbsp;
            <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
            年龄：<select id="age">
               <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>
               <option>男</option>
               <option>女</option>
            </select>&nbsp;
            <input type="button" value="全部删除" />
            <input type="button" value="批量删除" />
         </div><br />
         <div>
            <table border="1" cellspacing="1" cellpadding="10">
               <thead>
                  <tr>
                     <th><input type="checkbox" /> </th>
                     <th>id</th>
                     <th>用户名</th>
                     <th>密码</th>
                     <th>年龄</th>
                     <th>性别</th>
                     <th>操作</th>
                  </tr>
               </thead>
               <tbody>
                  <tr ng-repeat="user in users ">
                     <td><input ng-model="user.state" type="checkbox"/></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>

<!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="js/angular.js" ></script>
      <script type="text/javascript" src="js/angular-route.js" ></script>
      <script type="text/javascript">
         var app = angular.module("myApp",["ngRoute"]);
         //使用config配置路由规则
         app.config(["$routeProvider",function($routeProvider){
            $routeProvider
               .when("/addUser",{
                  controller:"addUserCtrl",
                  templateUrl:"addUser.html"
                  })
               .when("/updatePwd/:name",{
                  controller:"updatePwdCtrl",
                  templateUrl:"updatePwd.html"
                  })
               .otherwise({redirectTo:"/addUser"});
         }]);
         app.controller("myCtrl",function($scope,$location){
            $scope.ageSize = "";//绑定年龄范围
            $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.goToUrl = function(path){
               alert(path);
               $location.path(path);
            }
            
            //年龄范围过滤
            $scope.ageTest = function(age,ageSize){
               //alert(ageSize);
               //alert(age);
               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("请选择删除项");
               }
            }
            
         });
         //自定义年龄过滤器
         app.filter("ageFilter",function(){
            return function(user){
               alert(user);
               /*if(user.age<20 || user.age>22){
                  return null;
               }else{
                  return user;
               }*/
            }
         });
         
         //定义添加用户控制器
         app.controller("addUserCtrl",function($scope){
            //alert("添加用户控制器");
            $scope.name = "";
            $scope.pwd = "";
            $scope.pwd2 = "";
            $scope.age = "";
            $scope.sex = "";
            
            $scope.sub = function(){
               var newUser = {
                  id:$scope.users.length + 1,
                  name:$scope.name,
                  pwd:$scope.pwd,
                  age:$scope.age,
                  sex:$scope.sex
               }
               //添加新用户.
               $scope.users.push(newUser);
            }
         });
         //定义修改用户控制器
         app.controller("updatePwdCtrl",function($scope,$routeParams){
            //alert("修改控制器");
            $scope.name = $routeParams.name;
            $scope.oldPwd = "";
            $scope.pwd1 = "";
            $scope.pwd2 = "";
            //alert($scope.name);
            $scope.updatePwd = function(){
               //alert(pwd1);
               /*if($scope.pwd1 != $scope.pwd2){
                  alert("两次密码不一致 ");
               }*/
               
               for(index in $scope.users){
                  //alert($scope.users[index].name);
                  if($scope.users[index].name == $scope.name) {
                     $scope.users[index].pwd = $scope.pwd1;
                  }
               }
            }
         });
      </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
      <center>
         <h3>用户信息表</h3>
         <div>
            <input placeholder="用户名查询" size="10" />&nbsp;
            <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
            年龄：<select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
               <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>
               <option>男</option>
               <option>女</option>
            </select>&nbsp;
            <input type="button" value="全部删除" />
            <input ng-click="deleteSel()" type="button" value="批量删除" />
         </div><br />
         <div>
            <table border="1" cellspacing="1" cellpadding="10">
               <thead>
                  <tr>
                     <th><input type="checkbox" /> </th>
                     <th>id</th>
                     <th>用户名</th>
                     <th>密码</th>
                     <th>年龄</th>
                     <th>性别</th>
                     <th>操作</th>
                  </tr>
               </thead>
               <tbody>
                  <tr ng-repeat="user in users " ng-if="ageTest(user.age,ageSize)">
                     <td><input ng-model="user.state" type="checkbox"/></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="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td>
                  </tr>
               </tbody>
               
               
            </table>
         </div><br />
         <button class="addUser" ng-click="goToUrl('/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>