增删改查.
来源:互联网 发布:俄罗斯战斗民族知乎 编辑:程序博客网 时间:2024/06/10 03:09
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery-2.1.0.js" type="text/javascript"></script> <script src="angular.js" type="text/javascript"></script> <script src="angular-route.js" type="text/javascript"></script> <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
- hibernate增删查改
- XML 增删查改
- ldap 增删改查
- mysql增删改查
- 动态增删改查
- jdom增删改查
- 集合增删查改
- XML 增删改查
- xml增删改查
- lucene增删改查
- 增删改查
- ldap增删改查
- MySQLz增删改查
- 生成增删改查
- Mybatis 增删改查
- 表格增删查改
- Jdbc 增删改查
- xml增删查改
- ping不同的网卡方法
- H5唤起原生应用
- java适配器模式
- 数据结构第三周项目1--顺序表的基本运算
- java操作nsq数据插入elasticsearch
- 增删改查.
- opencv大牛博客集锦
- mtk6737如何改差值文件
- eclipse编写的老项目怎么导入到Android studio中运行
- Android:30分钟弄明白Touch事件分发机制
- IOS开发-设置隐藏系统默认返回按钮(默认顶部)
- 浅析java中的BigDecimal
- [JAVA] Hibernate 大数据类型映射
- ESL 7 模型的评估与选择