<!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>
用户2
最新推荐文章于 2021-02-16 08:58:04 发布