数据增删改查 (inter)

来源：互联网发布：淘宝物流宝平台编辑：程序博客网时间：2024/06/01 11:38
<!DOCTYPE html><html>   <head>      <meta charset="utf-8" />      <title></title>      <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>      <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>      <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">      <script type="text/javascript">         var app=angular.module("myapp",["ngRoute"]);         var user=[{"id":"1","name":"张三","pwd":"111","age":"20","sex":"男"},         {"id":"2","name":"李四","pwd":"222","age":"21","sex":"女"},         {"id":"3","name":"王五","pwd":"333","age":"22","sex":"男"}];         app.value("user",user);         app.config(["$routeProvider",function($routeProvider){            $routeProvider            .when("/up",{               controller:"myctrl",               templateUrl:"up.html"})            .when("/add",{               controller:"myctrl",               templateUrl:"add.html"            });         }]);         app.controller("myctrl",function($scope,user,$location){            $scope.user=user;            $scope.del=function(){               $scope.user.splice($scope.user);            };            $scope.goToUrl=function(path){               $location.path(path);            };            $scope.goTourl=function(path){               $location.path(path);            };            $scope.dd=function(){               var usernew={id:$scope.id,               name:$scope.name,               pwd:$scope.pwd,               age:$scope.age,               sex:$scope.sex};               $scope.user.push(usernew);            };            var ii=0;            $scope.upp=function($index){               $scope.newpwdd=$scope.user[$index].pwd;               $scope.newname=$scope.user[$index].name;               ii=$index;            };            $scope.gmm=function(){               $scope.user[ii].pwd=$scope.newpwd;            };         });      </script>      <style>         .header{            width: 700px;            height: 50px;         }         .name{            margin-top: 10px;         }         .age{            margin-top: 10px;         }         .sex{            margin-top: 10px;         }         .add{            margin-top: 20px;         }      </style>   </head>   <body ng-app="myapp" ng-controller="myctrl">      <center>      <div class="header">         用户名:<input type="text" class="name" ng-model="search" />         年龄：<input type="text" class="age" ng-model="searchone" />         性别：<select class="sex" ng-model="searchtwo">            <option></option>            <option>男</option>            <option>女</option>         </select>         <button ng-click="del()">全部删除</button>      </div>      <table border="1" cellpadding="20" cellspacing="0">         <tr>            <th>id</th>            <th>用户名</th>            <th>密码</th>            <th>年龄</th>            <th>性别</th>            <th>操作</th>         </tr>         <tr ng-repeat="u in user | filter:{'name':search} | filter:{'age':searchone} | filter:{'sex':searchtwo}">            <td>{{u.id}}</td>            <td>{{u.name}}</td>            <td>{{u.pwd}}</td>            <td>{{u.age}}</td>            <td>{{u.sex}}</td>            <td>               <button ng-click="goToUrl('/up');upp($index)" >修改密码</button>            </td>         </tr>      </table>      <button class="add" ng-click="goTourl('/add')">添加用户</button>      <script type="text/ng-template" id="up.html">         <form action="#">            <table>               <tr>                  <td>用户名: </td>                  <td><input type="text" ng-model="newname" /></td>               </tr>               <tr>                  <td>旧密码: </td>                  <td><input type="text" ng-model="newpwdd" /></td>               </tr>               <tr>                  <td>新密码:</td>                  <td><input type="text" ng-model="newpwd"  /></td>               </tr>               <tr>                  <td>确认密码:</td>                  <td><input type="text" /></td>               </tr>               <tr>                  <td colspan="2" align="center">                     <input type="button" ng-click="gmm()" value="提交" />                  </td>               </tr>            </table>         </form>      </script>      <script type="text/ng-template" id="add.html">         <form action="#">            <table>               <tr>                  <td>id:</td>                  <td><input type="text" ng-model="id" /></td>               </tr>               <tr>                  <td>用户名:</td>                  <td> <input type="text" ng-model="name" /></td>               </tr>               <tr>                  <td>密码:</td>                  <td><input type="text" ng-model="pwd" /></td>               </tr>               <tr>                  <td>年龄:</td>                  <td><input type="text" ng-model="age" /></td>               </tr>               <tr>                  <td>性别:</td>                  <td><input type="text" ng-model="sex" /><br /></td>               </tr>               <tr>                  <td colspan="2" align="center"><input type="button" ng-click="dd()" value="提交" /></td>               </tr>            </table>         </form>      </script>      <div ng-view>               </div>      </center>   </body></html>
阅读全文
0 0
数据 增删改查 (inter)

数据增删改查 (inter)
