aj基本增删改查
来源:互联网 发布:ubuntu源无法使用 编辑:程序博客网 时间:2024/05/17 04:52
- <!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.users = [
- {"id":1,"name":"张三","pwd":"123","age":20,"sex":"男"},
- {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女"},
- {"id":3,"name":"王五","pwd":"789","age":42,"sex":"男"}
- ];
- //定义页面跳转方法
- $scope.goToUrl = function(path){
- alert(path);
- $location.path(path);
- }
- //全部删除
- $scope.del=function(){
- if(confirm("确实删除吗?")){
- $scope.users=[];
- }
- };
- $scope.ageTest=function(age,agesize){
- 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=[];
- 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.controller("addUserCtrl",function($scope){
- $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){
- $scope.name = $routeParams.name;
- $scope.oldPwd = "";
- $scope.pwd1 = "";
- $scope.pwd2 = "";
- $scope.updatePwd = function(){
- for(index in $scope.users){
- 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 ng-model="search" placeholder="用户名查询" size="10" />
- 年龄:<select id="age" ng-model="agesize" ng-init="agesize='--请选择--'">
- <option>--请选择--</option>
- <option>19-30</option>
- <option>31-40</option>
- <option>41-50</option>
- </select>
- 性别:<select>
- <option>男</option>
- <option>女</option>
- </select>
- <input type="button" value="全部删除" ng-click="del()"/>
- <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 | filter:{'name':search}" ng-if="ageTest(user.age,agesize)">
- <th><input ng-model="user.state" type="checkbox"</th>
- <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>
阅读全文
0 0
- aj基本增删改查
- aj商品增删改查
- aj增删改查完整版1
- ibatis(基本增删改查)
- sql 基本增删改查
- mongodb基本增删改查
- hibernate_基本增删改查
- mysql 基本增删改查
- 增删查改基本操作
- 基本操作增删改查
- sql基本增删改查
- 基本的增删改查
- 基本表管理和增删改查
- SQL增删改查基本操作
- JAVA数据库基本操作,增删改查
- django数据库基本操作增删改查
- 基本的增删改查流程
- sql基本的增删查改
- 2017.10.20测试
- Struts2入门
- git命令之(分支管理)
- IOS真机 XctestWD启动报错 use -v to see invocation
- 用户表格模板_查询_排序
- aj基本增删改查
- Spring学习笔记4
- 307. Range Sum Query
- 2017.10.19测试
- build.gradle文件详解<转>
- 目标检测中Recall、Precision和IOU
- 购物车,清空购物车,添加数量,结算总价,总数量,全选,
- mac下安装烧录esp8266
- PS磁性套索工具怎么后退或取消一个点