Angular增删改查

最新推荐文章于 2022-11-17 14:05:54 发布

超级鲨鱼巨人

最新推荐文章于 2022-11-17 14:05:54 发布

阅读量260

点赞数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../angular/angular.js" ></script>
       <script type="text/javascript" src="../angular/angular-route.js" ></script>
       <script>
           var app = angular.module('myApp',['ngRoute']);
           app.config(["$routeProvider",function($routeProvider){
               $routeProvider
               .when('/tian',{
                   controller:"addUserCtrl",
                   templateUrl:"tian.html"})
               .when("/updatePwd/:name",{
                   controller:"update",
                   templateUrl:"updatePwd.html"})
               .otherwise({redirectTo:"/tian"});
           }]);

           app.controller("myCtrl",function($scope,$location){
               $scope.bx = [
               {name:'张三',mm:121,age:18,sex:'男',state:false},
               {name:'李四',mm:123,age:25,sex:'女',state:false},
               {name:'王五',mm:151,age:20,sex:'男',state:false}
               ];
               $scope.goToUrl = function(path){
                   $location.path(path);
               };
               $scope.shan = function(){
                   $scope.bx = [];
               };
               $scope.san = function(index){
                   $scope.bx.splice(index,1);
               };
               //批量删除
               $scope.deleteSel = function(){
                   var arr = [];
                   for(index in $scope.bx){
                       if($scope.bx[index].state){
                           arr.push($scope.bx[index].name);
                       }
                   }
                   if(arr.length>0){
                       for(i in arr){
                           for(i2 in $scope.bx){
                               if(arr[i] == $scope.bx[i2].name){
                                   $scope.bx.splice(i2,1);
                               }
                           }
                       }
                   }else{
                       alert("请选择您要删除的数据");
                   }
               }
           });
           //添加用户
           app.controller("addUserCtrl",function($scope){
               $scope.name = "";
               $scope.mm = "";
               $scope.age = "";
               $scope.sex = "";
               $scope.sub = function(){
                   var newUser = {
                       name:$scope.name,
                       mm:$scope.mm,
                       age:$scope.age,
                       sex:$scope.sex
                   }
                   if (newUser.name=="") {
                       alert("请输入用户名");
                   } else{
                       if (newUser.mm=="") {
                           alert("请输入密码");
                       } else{
                           if (newUser.age>=10 && newUser.age<=60) {
                               $scope.bx.push(newUser);
                           } else{
                               alert("年龄不符");
                           }

                       }

                   }

               }
           });
           //修改密码
           app.controller("update",function($scope,$routeParams){
               $scope.name = $routeParams.name;
               $scope.oldPwd = "";
               $scope.pwd1 = "";
               $scope.pwd2 = "";
               $scope.updatePwd = function(){
                   for(index in $scope.bx){
                       if($scope.bx[index].name == $scope.name) {
                           if ($scope.bx[index].mm==$scope.oldPwd) {
                               $scope.bx[index].mm = $scope.pwd1;
                           } else{
                               alert("旧密码不符合");
                           }

                       }
                   }
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <div id="box">
           <div id="x">
                <center>
                  <button class="tj" ng-click="goToUrl('/tian.html')">添加用户</button>

                  <script type="text/ng-template" id="tian.html">
                  <form action="">
                  <table border="1" cellpadding="10" id="db">
                      <tr>
                      <td>用户名:<input type="text" ng-model="name"/></td>
                      </tr>
                      <tr>
                      <td>密码:<input type="text" ng-model="mm"/></td>
                      </tr>
                      <tr>
                      <td>年龄:<input type="text" ng-model="age"/></td>
                      </tr>
                      <tr>
                      <td>性别:<input type="text" ng-model="sex"/></td>
                      </tr>
                      <tr>
                      <td><button id="ti" ng-click="sub()">提交</button></td>
                      </tr>
                  </table>
               </form>
                  </script>
               <script type="text/ng-template" id="updatePwd.html">
               <form>
                   <table border="1" cellspacing="1" cellpadding="10">
                       <tr>
                           <th>用户名：</th>
                           <td><input ng-model="name" disabled="disabled" 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="submit" value="提交" ng-click="updatePwd()" /></td>
                       </tr>
                   </table>
               </form>
               </script>
               <div ng-view></div>
               </center>
           </div>
           <center>
           <div id="top">
               <table class="sm">
                   <tr>
                   <td><input type="text" ng-model="names" placeholder="用户名查询"/></td>
                   <td>
                   <input type="text" placeholder="年龄范围查询" ng-model="cfw" />
                   </td>
                   <td><select ng-model="fsex">
                      <option>男</option>
                      <option>女</option>
                   </select></td>
                   <td><button ng-click="shan()">全部删除</button></td>
                   <td><button ng-click="deleteSel()">批量删除</button></td>
                   </tr>
               </table>
           </div>
           <div id="z">

               <table border="1" cellpadding="10">
                   <tr>
                   <td><input type="checkbox" ng-model="qx"/></td>
                   <td>id</td>
                   <td>用户名</td>
                   <td>密码</td>
                   <td>年龄</td>
                   <td>性别</td>
                   <td>操作</td>
                   <td>删除</td>
                   </tr>
                   <tr ng-repeat="x in bx | filter:{name:names} | filter:{sex:fsex} | filter:{age:cfw} ">
                   <td><input type="checkbox" ng-checked="qx" ng-model="x.state"/></td>
                   <td>{{$index+1}}</td>
                   <td>{{x.name}}</td>
                   <td>{{x.mm}}</td>
                   <td>{{x.age}}</td>
                   <td>{{x.sex}}</td>
                   <td><button ng-click="goToUrl('/updatePwd/'+x.name)">修改密码</button></td>
                   <td><button ng-click="san($index)">删除</button></td>
                   </tr>
               </table>
           </div>
           </center>
       </div>
   </body>
</html>

超级鲨鱼巨人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular增删改查

var app = angular.module('myApp',['ngRoute']); app.config(["$routeProvider",function($routeProvider){ $routeProvider .when('/tian',{
复制链接

扫一扫