angularjs之购物车的增改查1
来源:互联网 发布:ofo登录 网络请求超时 编辑:程序博客网 时间:2024/06/04 19:16
<!DOCTYPE html><html ng-app="UsersApp"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script type="text/javascript" src="jquery.1.12.4.js"></script> <script type="text/javascript" src="angular-1.3.0.js"></script> <title>用户</title> <script type="text/javascript"> var app = angular.module("UsersApp", []); app.controller("UsersCtrl", function ($scope) { $scope.data = [ { id: 1, name: "aa", password: "aa", age: 10, sex: "男" }, { id: 2, name: "bb", password: "bb", age: 20, sex: "男" }, { id: 3, name: "cc", password: "cc", age: 30, sex: "男" }, { id: 4, name: "dd", password: "dd", age: 40, sex: "男" } ]; var id = 1; $scope.add = function () { $scope.data.push({ id: id++, name: $scope.name, password: $scope.password, age: $scope.age, sex: $scope.sex }); $scope.name = ""; $scope.password = ""; $scope.age = ""; $scope.sex = ""; $scope.addUserIsShow = false; }; $scope.addUser = function () { $scope.addUserIsShow = true; }; $scope.editUser = function (index) { var user = $scope.data[index]; $scope.e_name = user.name; $scope.e_old_password = ""; $scope.e_password = ""; $scope.e_repassword = ""; $scope.editUserIsShow = true; $scope.index = index; }; $scope.edit = function () { if ($scope.e_password != $scope.e_repassword) { alert("两次密码不一致!"); return; } $scope.data[$scope.index].password = $scope.e_password; $scope.addUserIsShow = false; }; var old_data = $scope.data; $scope.searchByName = function () { $scope.data = []; for (var i in old_data) { if (old_data[i].name == $scope.s_name) { $scope.data.push(old_data[i]); } } }; }); $(function () { $("input[name='check_all']").click(function () { var chked = this.checked; $("input[name='users']").each(function () { this.checked = chked; }); }); }); </script></head><body ng-controller="UsersCtrl"><div> <input type="text" ng-model="s_name" placeholder="用户名查询" ng-change="searchByName()"/></div><table border="1"> <tr> <th> <input type="checkbox" name="check_all"/> </th> <th>ID</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr ng-repeat="user in data"> <td> <input type="checkbox" name="users"/> </td> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.password }}</td> <td>{{ user.age }}</td> <td>{{ user.sex }}</td> <td> <button ng-click="editUser($index)">修改密码</button> </td> </tr></table><button ng-click="addUser()">添加用户</button><div ng-show="addUserIsShow"> <table border="1"> <tr> <td> 用户名: </td> <td> <input type="text" ng-model="name"/> </td> </tr> <tr> <td> 密码: </td> <td> <input type="text" ng-model="password"/> </td> </tr> <tr> <td> 年龄: </td> <td> <input type="text" ng-model="age"/> </td> </tr> <tr> <td> 性别: </td> <td> <input type="text" ng-model="sex"/> </td> </tr> <tr> <td colspan="2" align="center"> <button ng-click="add()">提交</button> </td> </tr> </table></div><div ng-show="editUserIsShow"> <table border="1"> <tr> <td> 用户名: </td> <td> <input type="text" ng-model="e_name" disabled/> </td> </tr> <tr> <td> 旧密码: </td> <td> <input type="text" ng-model="e_old_password"/> </td> </tr> <tr> <td> 新密码: </td> <td> <input type="text" ng-model="e_password"/> </td> </tr> <tr> <td> 确认密码: </td> <td> <input type="text" ng-model="e_repassword"/> </td> </tr> <tr> <td colspan="2" align="center"> <input type="hidden" ng-model="index"/> <button ng-click="edit()">提交</button> </td> </tr> </table></div></body></html>
阅读全文
0 0
- angularjs之购物车的增改查1
- angularJS实例之购物车
- angularJs入门之购物车实现
- angularjs之购物
- angularjs实现的购物车功能
- AngularJs实现简单的购物车
- Angularjs实现简单的购物车
- AngularJs简单购物车的实现
- ionis 和angularjs 购物车的代码
- angularjs实现购物车的一些功能
- 【AngularJS】购物车实例
- AngularJS 购物车实例
- AngularJS-购物车Demo
- angularJS 购物车练习
- 购物车AngularJs
- angularJs购物车
- angularjs bootstrap 购物车
- angularjs完成购物车
- 【JavaEE学习笔记】Servlet_03_重定向,请求对象,请求域
- ADT打包本地扩展ANE指令
- ACM 大数 某种序列
- Java软件开发工程师的自我修养与晋升(B/S结构)
- xiaoyang,shopping
- angularjs之购物车的增改查1
- UUID 和 GUID 的区别
- DrawerLayout侧拉
- SurfaceView播放视频
- 简单的朴素贝叶斯模型练习
- 实验五:用callback增强链表模块来实现命令行菜单小程序V2.8
- 考后梳理之信息系统开发与管理
- light oj 1017
- js基础(一)——数据类型