完成表单功能
来源:互联网 发布:强力安卓数据恢复精灵 编辑:程序博客网 时间:2024/05/17 22:32
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border: 1px solid #000; border-collapse: collapse; margin: 10px; text-align: center; } tr,td{ border: 1px solid #000; border-collapse: collapse; padding: 10px; } </style> <script src="../../swipter/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myctrl",function ($scope) { var items=[ {"id":124,"name":"zhang","pass":456,"age":13,"sex":"女"}, {"id":144,"name":"zhangfei","pass":956,"age":23,"sex":"男"}, {"id":134,"name":"zhangcvs","pass":476,"age":33,"sex":"男"}, {"id":224,"name":"zhangsdf","pass":466,"age":18,"sex":"女"} ]; $scope.items=items; $scope.show=false; $scope.unshow=false; $scope.add=function () { $scope.show=true; $scope.unshow=false; }; $scope.action=function () { items.push({ "id": $scope.myid, "name": $scope.myname, "pass": $scope.mypass, "age": $scope.myage, "sex": $scope.mysex }); }; $scope.allcheck=function () { var arr=[]; var is=confirm("确定全部删除?"); if(is==true) { for (var i = 0; i < items.length; i++) { items[i] = ""; } } } $scope.update=function (item) { console.log(item); $scope.unshow=true; $scope.show=false; $scope.but=function () { for(var i=0;i<items.length;i++){ if(items[i].id==item.id&&$scope.newpass==$scope.surepass&&$scope.oldpass==items[i].pass){ console.log(items[i].pass); items[i].pass=$scope.newpass; }else { confirm("密码错误,请核对信息"); break; } } } } }); </script></head><body ng-app="myapp" ng-controller="myctrl"><input type="text" ng-model="na"/><input type="text" ng-model="ag"/>性别:<select ng-model="se"> <option>女</option> <option>男</option></select><button ng-click="allcheck()">全部删除</button><table> <tr> <td>id</td> <td>用户名</td> <td>密码</td> <td>年龄</td> <td>性别</td> <td>操作</td> </tr> <tr ng-repeat="item in items | filter:{'name':na} | filter:{'age':ag} | filter:{'sex':se}"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.pass}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td><button ng-click="update(item)">修改密码</button></td> </tr></table><button ng-click="add()">添加用户</button><div ng-show="show"> id:<input type="text" ng-model="myid"/><br> 用户名:<input type="text" ng-model="myname"/><br> 密码:<input type="text" ng-model="mypass"/><br> 年龄:<input type="text" ng-model="myage"/><br> 性别:<input type="text" ng-model="mysex"/><br> <button ng-click="action()">提交</button></div><div ng-show="unshow"> 旧密码:<input type="text" ng-model="oldpass"/><br> 新密码:<input type="text" ng-model="newpass"/><br> 确认密码:<input type="text" ng-model="surepass"/><br> <button ng-click="but()">提交</button></div></body></html>
阅读全文
0 0
- 完成表单功能
- 使用angularJS完成表单验证功能
- 使用HTML_QuickForm快速完成自动表单完成功能
- jQuery使用动态渲染表单功能完成ajax文件下载
- jQuery使用动态渲染表单功能完成ajax文件下载
- Drupal6中使用一份form表单完成提交创建与编辑更改的功能
- 【表单提示建议/自动完成功能】jquery autocomplete插件的使用及其改进
- JSP、Servlet与JavaBean实现从表单传输到数据库验证完成登录功能
- js 处理form表单整理成数组,结合php 完成排序功能的实现
- 通过js 处理form表单整理成数组,结合php 完成排序功能的实现
- js 处理form表单整理成数组,结合php 完成排序功能的实现
- jquery,完成表单验证
- 表单自动完成
- jquery完成表单验证
- 21. PHP 表单验证 - 完成表单实例
- **PHP** 表单(2)-表单完成
- Ajax自动完成功能
- 又完成两个功能
- Navicat for Oracle 转自他人
- 今天分享的是一个在表格中修改以及分列模糊查询的东西,能帮助初学者更快的了解angluar中的传值和管道符如何使用
- 开源全局配置中心XDiamond
- 获取加载后的所有feature
- HDU
- 完成表单功能
- 新建一个maven工程小总结
- 启动hbase shell的命令
- Glide 4.0+ 加载图片工具类
- JAVA集合类的剖析
- json格式和list的转换
- spring @value 注入static
- Tensorflow学习
- server.xml