首先需要导入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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
