angular jquery实现用户表
来源：互联网 发布：申请淘宝网店要多少钱 编辑：程序博客网 时间：2024/06/06 05:16
首先需要导入viewport 然后导入jquery和angular的工具包
<!DOCTYPE html><html ng-app="UMApp"><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 example_data = [ { id: 1, name: "曹操", password: "123456", age: 45, sex: "男" }, { id: 2, name: "张辽", password: "123456", age: 34, sex: "男" }, { id: 3, name: "司马懿", password: "123456", age: 30, sex: "男" }, { id: 4, name: "夏侯淳", password: "123456", age: 40, sex: "男" }, { id: 5, name: "蔡文姬", password: "123456", age: 18, sex: "女" }, { id: 6, name: "刘备", password: "123456", age: 50, sex: "男" }, { id: 7, name: "关羽", password: "123456", age: 45, sex: "男" }, { id: 8, name: "张飞", password: "123456", age: 46, sex: "男" }, { id: 9, name: "赵云", password: "123456", age: 35, sex: "男" }, { id: 10, name: "孙尚香", password: "123456", age: 28, sex: "女" }, { id: 11, name: "孙权", password: "123456", age: 30, sex: "男" }, { id: 12, name: "周瑜", password: "123456", age: 32, sex: "男" }, { id: 13, name: "鲁肃", password: "123456", age: 33, sex: "男" }, { id: 14, name: "黄盖", password: "123456", age: 55, sex: "男" }, { id: 15, name: "小乔", password: "123456", age: 28, sex: "女" }, { id: 16, name: "小乔", password: "123456", age: 26, sex: "女" } ]; </script> <script type="text/javascript"> // 全选/全不选 $(function () { $("input[name='check_all']").click(function () { var checked = this.checked; // 获取 <input type="checkbox" name="check_all"/> 中checked属性的值 $("input[name='user_id[]']").each(function () { this.checked = checked; // 依次设置每一个 <input type="checkbox" name="user_id[]"/> 中checked属性的值 }); }); }); var app = angular.module("UMApp", []); app.controller("UMCtrl", function ($scope) { // 查询的年龄区间 $scope.age_sections = [ { txt: "10~20", min: 10, max: 20 }, { txt: "20~30", min: 20, max: 30 }, { txt: "30~40", min: 30, max: 40 }, { txt: "40~50", min: 40, max: 50 }, { txt: "50~60", min: 50, max: 60 }, { txt: "60~70", min: 60, max: 70 }, { txt: "70~80", min: 70, max: 80 } ]; $scope.data = example_data; var id = 17; var dataIsChange = false; // 数据是否有改变，用于查询时，判断是否需要备份数据 // 显示添加用户表单 $scope.showAddUserBox = function () { $scope.add_user_box_is_show = true; }; // 提交添加用户表单 $scope.addUser = function () { if ($scope.add_user_name == undefined || $scope.add_user_name == "") { alert("请输入用户名！"); return; } if ($scope.add_user_password == undefined || $scope.add_user_password == "") { alert("请输入密码！"); return; } if ($scope.add_user_repassword == undefined || $scope.add_user_repassword == "") { alert("请再次确认密码！"); return; } if ($scope.add_user_password != $scope.add_user_repassword) { alert("两次密码不一致！"); return; } if ($scope.add_user_age == undefined || $scope.add_user_age == "") { alert("请输入年龄！"); return; } if ($scope.add_user_sex == undefined || $scope.add_user_sex == "") { alert("请输入性别！"); return; } if (!/^\d+$/.test($scope.add_user_age)) { alert("年龄必须整数！"); return; } var age = parseInt($scope.add_user_age); if (age < 10 || age > 60) { alert("年龄必须在10~60之间！"); return; } $scope.data.push({ id: id++, name: $scope.add_user_name, password: $scope.add_user_password, age: $scope.add_user_age, sex: $scope.add_user_sex }); $scope.add_user_name = ""; $scope.add_user_password = ""; $scope.add_user_repassword = ""; $scope.add_user_age = ""; $scope.add_user_sex = ""; $scope.add_user_box_is_show = false; }; // 显示修改密码表单 $scope.showEditPwdBox = function ($index) { $scope.epwd_name = $scope.data[$index].name; $scope.epwd_index = $index; $scope.edit_pwd_box_is_show = true; }; // 提交修改密码表单 $scope.editPwd = function () { var user = $scope.data[$scope.epwd_index]; if ($scope.epwd_old_password == undefined || $scope.epwd_old_password == "") { alert("请输入旧密码！"); return; } if ($scope.epwd_password == undefined || $scope.epwd_password == "") { alert("请输入新密码！"); return; } if ($scope.epwd_repassword == undefined || $scope.epwd_repassword == "") { alert("请再次确认密码！"); return; } if ($scope.epwd_old_password != user.password) { alert("旧密码不正确！"); return; } if ($scope.epwd_password != $scope.epwd_repassword) { alert("两次密码不一致！"); return; } $scope.data[$scope.epwd_index].password = $scope.epwd_password; // 修改密码 $scope.edit_pwd_box_is_show = false; }; // 清空列表 $scope.removeAll = function () { $scope.data = []; }; // 删除选中项 $scope.removeChecked = function () { var remove_idx_arr = []; // 待删除的所有索引 // 获取所有user_id[]并且被选择的Checkbox $("input[name='user_id[]']:checked").each(function () { var index = this.value; // <input type="checkbox" name="user_id[]" value="{{ $index }}"/>，value中保存了数组的索引 remove_idx_arr.push(index); }); var data = $scope.data; // 备份当前列表 $scope.data = []; // 清空当前列表 for (var idx in data) { // 索引不在待删除的所有索引中，添加到新列表中 if (remove_idx_arr.indexOf(idx) == -1) { $scope.data.push(data[idx]); } } }; $scope.search = function () { var name = ""; var age = {}; // json对象，如：{ txt: "70~80", min: 70, max: 80 } var sex = ""; if ($scope.search_name_value != undefined && $scope.search_name_value != null) { name = $scope.search_name_value.trim(); } // 未选中时值：undefined，选中“请选择”按钮时值：null if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") { age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 } } if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) { sex = $scope.search_sex_value; } // 没有可查询的项 if (name == "" && age == {} && sex == "") { return; } console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "], 需要查找的sex: " + sex); // 从全部数据中查找name、age、sex，找到后添加到列表中 for (var i in $scope.data) { var item = $scope.data[i]; var index = parseInt(i) + 1; // 第一个tr是表头，所以用i + 1 // name相等，显示 if (item.name == name) { $("tr:eq(" + index + ")").show(); continue; } // 性别满足，显示 if (item.sex == sex) { $("tr:eq(" + index + ")").show(); continue; } if (age != {} && item.age >= age.min && item.age <= age.max) { $("tr:eq(" + index + ")").show(); continue; } // 3个条件都不符合，隐藏 $("tr:eq(" + index + ")").hide(); } }; }); </script></head><body ng-controller="UMCtrl"><div> <input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/> 年龄： <select ng-model="search_age_value" ng-options="section.txt for section in age_sections" ng-change="search()"> <option value="">请选择</option> </select> 性别： <select ng-model="search_sex_value" ng-change="search()"> <option value="">请选择</option> <option value="男">男</option> <option value="女">女</option> </select> <button ng-click="removeAll()">全部删除</button> <button ng-click="removeChecked()">批量删除</button></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="user_id[]" value="{{ $index }}"/> </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="showEditPwdBox($index)">修改密码</button> </td> </tr></table><div> <button ng-click="showAddUserBox()">添加用户</button></div><div ng-show="add_user_box_is_show"> <table border="1"> <tr> <td> 用户名： </td> <td> <input type="text" ng-model="add_user_name"/> </td> </tr> <tr> <td> 密码： </td> <td> <input type="text" ng-model="add_user_password"/> </td> </tr> <tr> <td> 确认密码： </td> <td> <input type="text" ng-model="add_user_repassword"/> </td> </tr> <tr> <td> 年龄： </td> <td> <input type="text" ng-model="add_user_age"/> </td> </tr> <tr> <td> 性别： </td> <td> <input type="text" ng-model="add_user_sex"/> </td> </tr> <tr> <td colspan="2" align="center"> <button ng-click="addUser()">提交</button> </td> </tr> </table> </table></div><div ng-show="edit_pwd_box_is_show"> <table border="1"> <tr> <td> 用户名： </td> <td> <input type="text" ng-model="epwd_name" disabled/> </td> </tr> <tr> <td> 旧密码： </td> <td> <input type="text" ng-model="epwd_old_password"/> </td> </tr> <tr> <td> 新密码： </td> <td> <input type="text" ng-model="epwd_password"/> </td> </tr> <tr> <td> 确认密码： </td> <td> <input type="text" ng-model="epwd_repassword"/> </td> </tr> <tr> <td colspan="2" align="center"> <input type="hidden" ng-model="epwd_index"/> <button ng-click="editPwd()">提交</button> </td> </tr> </table></div></body></html>---------------------添加用户的碎片----------------------
<!DOCTYPE html><html ng-app="UMApp"><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("UMApp", []); app.controller("UMCtrl", function ($scope) { $scope.data = []; var id = 1; // 显示添加用户表单 $scope.showAddUserBox = function () { $scope.add_user_box_is_show = true; }; // 提交添加用户表单 $scope.addUser = function () { if ($scope.add_user_name == undefined || $scope.add_user_name == "") { alert("请输入用户名！"); return; } if ($scope.add_user_password == undefined || $scope.add_user_password == "") { alert("请输入密码！"); return; } if ($scope.add_user_repassword == undefined || $scope.add_user_repassword == "") { alert("请再次确认密码！"); return; } if ($scope.add_user_password != $scope.add_user_repassword) { alert("两次密码不一致！"); return; } if ($scope.add_user_age == undefined || $scope.add_user_age == "") { alert("请输入年龄！"); return; } if ($scope.add_user_sex == undefined || $scope.add_user_sex == "") { alert("请输入性别！"); return; } if (!/^\d+$/.test($scope.add_user_age)) { alert("年龄必须整数！"); return; } var age = parseInt($scope.add_user_age); if (age < 10 || age > 60) { alert("年龄必须在10~60之间！"); return; } $scope.data.push({ id: id++, name: $scope.add_user_name, password: $scope.add_user_password, age: $scope.add_user_age, sex: $scope.add_user_sex }); $scope.add_user_name = ""; $scope.add_user_password = ""; $scope.add_user_repassword = ""; $scope.add_user_age = ""; $scope.add_user_sex = ""; $scope.add_user_box_is_show = false; }; }); </script></head><body ng-controller="UMCtrl"><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="user_id[]"/> </td> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.password }}</td> <td>{{ user.age }}</td> <td>{{ user.sex }}</td> <td> <button>修改密码</button> </td> </tr></table><div> <button ng-click="showAddUserBox()">添加用户</button></div><div ng-show="add_user_box_is_show"> <table border="1"> <tr> <td> 用户名： </td> <td> <input type="text" ng-model="add_user_name"/> </td> </tr> <tr> <td> 密码： </td> <td> <input type="text" ng-model="add_user_password"/> </td> </tr> <tr> <td> 确认密码： </td> <td> <input type="text" ng-model="add_user_repassword"/> </td> </tr> <tr> <td> 年龄： </td> <td> <input type="text" ng-model="add_user_age"/> </td> </tr> <tr> <td> 性别： </td> <td> <input type="text" ng-model="add_user_sex"/> </td> </tr> <tr> <td colspan="2" align="center"> <button ng-click="addUser()">提交</button> </td> </tr> </table> </table></div></body></html>-----------------修改密码的碎片---------------
<!DOCTYPE html><html ng-app="UMApp"><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 example_data = [ { id: 1, name: "曹操", password: "123456", age: 45, sex: "男" }, { id: 2, name: "张辽", password: "123456", age: 34, sex: "男" }, { id: 3, name: "司马懿", password: "123456", age: 30, sex: "男" }, { id: 4, name: "夏侯淳", password: "123456", age: 40, sex: "男" }, { id: 5, name: "蔡文姬", password: "123456", age: 18, sex: "女" }, { id: 6, name: "刘备", password: "123456", age: 50, sex: "男" }, { id: 7, name: "关羽", password: "123456", age: 45, sex: "男" }, { id: 8, name: "张飞", password: "123456", age: 46, sex: "男" }, { id: 9, name: "赵云", password: "123456", age: 35, sex: "男" }, { id: 10, name: "孙尚香", password: "123456", age: 28, sex: "女" }, { id: 11, name: "孙权", password: "123456", age: 30, sex: "男" }, { id: 12, name: "周瑜", password: "123456", age: 32, sex: "男" }, { id: 13, name: "鲁肃", password: "123456", age: 33, sex: "男" }, { id: 14, name: "黄盖", password: "123456", age: 55, sex: "男" }, { id: 15, name: "小乔", password: "123456", age: 28, sex: "女" }, { id: 16, name: "小乔", password: "123456", age: 26, sex: "女" } ]; </script> <script type="text/javascript"> var app = angular.module("UMApp", []); app.controller("UMCtrl", function ($scope) { $scope.data = example_data; // 显示修改密码表单 $scope.showEditPwdBox = function ($index) { $scope.epwd_name = $scope.data[$index].name; $scope.epwd_index = $index; $scope.edit_pwd_box_is_show = true; }; // 提交修改密码表单 $scope.editPwd = function () { var user = $scope.data[$scope.epwd_index]; if ($scope.epwd_old_password == undefined || $scope.epwd_old_password == "") { alert("请输入旧密码！"); return; } if ($scope.epwd_password == undefined || $scope.epwd_password == "") { alert("请输入新密码！"); return; } if ($scope.epwd_repassword == undefined || $scope.epwd_repassword == "") { alert("请再次确认密码！"); return; } if ($scope.epwd_old_password != user.password) { alert("旧密码不正确！"); return; } if ($scope.epwd_password != $scope.epwd_repassword) { alert("两次密码不一致！"); return; } $scope.data[$scope.epwd_index].password = $scope.epwd_password; // 修改密码 $scope.edit_pwd_box_is_show = false; }; }); </script></head><body ng-controller="UMCtrl"><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="user_id[]"/> </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="showEditPwdBox($index)">修改密码</button> </td> </tr></table><div ng-show="edit_pwd_box_is_show"> <table border="1"> <tr> <td> 用户名： </td> <td> <input type="text" ng-model="epwd_name" disabled/> </td> </tr> <tr> <td> 旧密码： </td> <td> <input type="text" ng-model="epwd_old_password"/> </td> </tr> <tr> <td> 新密码： </td> <td> <input type="text" ng-model="epwd_password"/> </td> </tr> <tr> <td> 确认密码： </td> <td> <input type="text" ng-model="epwd_repassword"/> </td> </tr> <tr> <td colspan="2" align="center"> <input type="hidden" ng-model="epwd_index"/> <button ng-click="editPwd()">提交</button> </td> </tr> </table></div></body></html>-------------------------------删除的碎片-------------------
<!DOCTYPE html><html ng-app="UMApp"><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 example_data = [ { id: 1, name: "曹操", password: "123456", age: 45, sex: "男" }, { id: 2, name: "张辽", password: "123456", age: 34, sex: "男" }, { id: 3, name: "司马懿", password: "123456", age: 30, sex: "男" }, { id: 4, name: "夏侯淳", password: "123456", age: 40, sex: "男" }, { id: 5, name: "蔡文姬", password: "123456", age: 18, sex: "女" }, { id: 6, name: "刘备", password: "123456", age: 50, sex: "男" }, { id: 7, name: "关羽", password: "123456", age: 45, sex: "男" }, { id: 8, name: "张飞", password: "123456", age: 46, sex: "男" }, { id: 9, name: "赵云", password: "123456", age: 35, sex: "男" }, { id: 10, name: "孙尚香", password: "123456", age: 28, sex: "女" }, { id: 11, name: "孙权", password: "123456", age: 30, sex: "男" }, { id: 12, name: "周瑜", password: "123456", age: 32, sex: "男" }, { id: 13, name: "鲁肃", password: "123456", age: 33, sex: "男" }, { id: 14, name: "黄盖", password: "123456", age: 55, sex: "男" }, { id: 15, name: "小乔", password: "123456", age: 28, sex: "女" }, { id: 16, name: "小乔", password: "123456", age: 26, sex: "女" } ]; </script> <script type="text/javascript"> // 全选/全不选 $(function () { $("input[name='check_all']").click(function () { var checked = this.checked; // 获取 <input type="checkbox" name="check_all"/> 中checked属性的值 $("input[name='user_id[]']").each(function () { this.checked = checked; // 依次设置每一个 <input type="checkbox" name="user_id[]"/> 中checked属性的值 }); }); }); var app = angular.module("UMApp", []); app.controller("UMCtrl", function ($scope) { $scope.data = example_data; $scope.removeAll = function () { $scope.data = []; }; $scope.removeChecked = function () { var remove_idx_arr = []; // 待删除的所有索引 // 获取所有user_id[]并且被选择的Checkbox $("input[name='user_id[]']:checked").each(function () { var index = this.value; // <input type="checkbox" name="user_id[]" value="{{ $index }}"/>，value中保存了数组的索引 remove_idx_arr.push(index); }); var data = $scope.data; // 备份当前列表 $scope.data = []; // 清空当前列表 for (var idx in data) { // 索引不在待删除的所有索引中，添加到新列表中 if (remove_idx_arr.indexOf(idx) == -1) { $scope.data.push(data[idx]); } } }; }); </script></head><body ng-controller="UMCtrl"><div> <button ng-click="removeAll()">全部删除</button> <button ng-click="removeChecked()">批量删除</button></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="user_id[]" value="{{ $index }}"/> </td> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.password }}</td> <td>{{ user.age }}</td> <td>{{ user.sex }}</td> <td> <button>修改密码</button> </td> </tr></table></body></html>----------------------------查询/搜索的碎片------------------
<!DOCTYPE html><html ng-app="UMApp"><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 example_data = [ { id: 1, name: "曹操", password: "123456", age: 45, sex: "男" }, { id: 2, name: "张辽", password: "123456", age: 34, sex: "男" }, { id: 3, name: "司马懿", password: "123456", age: 30, sex: "男" }, { id: 4, name: "夏侯淳", password: "123456", age: 40, sex: "男" }, { id: 5, name: "蔡文姬", password: "123456", age: 18, sex: "女" }, { id: 6, name: "刘备", password: "123456", age: 50, sex: "男" }, { id: 7, name: "关羽", password: "123456", age: 45, sex: "男" }, { id: 8, name: "张飞", password: "123456", age: 46, sex: "男" }, { id: 9, name: "赵云", password: "123456", age: 35, sex: "男" }, { id: 10, name: "孙尚香", password: "123456", age: 28, sex: "女" }, { id: 11, name: "孙权", password: "123456", age: 30, sex: "男" }, { id: 12, name: "周瑜", password: "123456", age: 32, sex: "男" }, { id: 13, name: "鲁肃", password: "123456", age: 33, sex: "男" }, { id: 14, name: "黄盖", password: "123456", age: 55, sex: "男" }, { id: 15, name: "小乔", password: "123456", age: 28, sex: "女" }, { id: 16, name: "小乔", password: "123456", age: 26, sex: "女" } ]; </script> <script type="text/javascript"> var app = angular.module("UMApp", []); app.controller("UMCtrl", function ($scope) { $scope.data = example_data; // 查询的年龄区间 $scope.age_sections = [ { txt: "10~20", min: 10, max: 20 }, { txt: "20~30", min: 20, max: 30 }, { txt: "30~40", min: 30, max: 40 }, { txt: "40~50", min: 40, max: 50 }, { txt: "50~60", min: 50, max: 60 }, { txt: "60~70", min: 60, max: 70 }, { txt: "70~80", min: 70, max: 80 } ]; $scope.search = function () { var name = ""; var age = {}; // json对象，如：{ txt: "70~80", min: 70, max: 80 } var sex = ""; if ($scope.search_name_value != undefined && $scope.search_name_value != null) { name = $scope.search_name_value.trim(); } // 未选中时值：undefined，选中“请选择”按钮时值：null if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") { age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 } } if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) { sex = $scope.search_sex_value; } // 没有可查询的项 if (name == "" && age == {} && sex == "") { return; } console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "], 需要查找的sex: " + sex); // 从全部数据中查找name、age、sex，找到后添加到列表中 for (var i in $scope.data) { var item = $scope.data[i]; var index = parseInt(i) + 1; // 第一个tr是表头，所以用i + 1 // name相等，显示 if (item.name == name) { $("tr:eq(" + index + ")").show(); continue; } // 性别满足，显示 if (item.sex == sex) { $("tr:eq(" + index + ")").show(); continue; } if (age != {} && item.age >= age.min && item.age <= age.max) { $("tr:eq(" + index + ")").show(); continue; } // 3个条件都不符合，隐藏 $("tr:eq(" + index + ")").hide(); } }; }); </script></head><body ng-controller="UMCtrl"><div> <input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/> 年龄： <select ng-model="search_age_value" ng-options="section.txt for section in age_sections" ng-change="search()"> <option value="">请选择</option> </select> 性别： <select ng-model="search_sex_value" ng-change="search()"> <option value="">请选择</option> <option value="男">男</option> <option value="女">女</option> </select></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="user_id[]"/> </td> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.password }}</td> <td>{{ user.age }}</td> <td>{{ user.sex }}</td> <td> <button>修改密码</button> </td> </tr></table></body></html> 阅读全文
0 0
- angular jquery实现用户表
- angular之用户表
- jquery函数转为angular指令实现示例
- Angular JQuery 实现简单快递管理界面
- 使用angular 实现简单 用户-角色-菜单-按钮权限控制
- jquery插件实现添加用户！
- jquery实现用户等待提示
- jQuery+Ajax实现用户登录
- jquery实现angular左侧导航栏,页面刷新仍选中
- dataTables/ajax/struts2/jquery的用户管理表实现
- angular 添加用户
- Angular用户管理
- angular用户列表信息
- angular用户添加案例
- angular+jquery综合练习
- angular实现简单的用户信息表
- Struts2+Jquery+Json实现用户登陆
- jquery中插件实现自动添加用户
- 51Nod 1281 山峰和旗子
- OkHttp拦截器的简单使用
- 水平分库分表的关键步骤和技术难点
- codeforces 875C
- XGBoost参数调优完全指南
- angular jquery实现用户表
- Python编写基于socket的非阻塞多人聊天室程序（单线程&多线程）
- 坐标转移
- 嵌入式技术的就业前景
- 用java+selenium启动chrome浏览器时报错Exception in thread "main" org.openqa.selenium.NoSuchSession
- 八(1) 5
- 自定义view画圆
- ProgressService下载图片
- SDUT-1273 面向对象程序设计上机练习十一（运算符重载）
