<!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.data前,备份下全部数据
var oldData = $scope.data;
$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);
// 清空列表
$scope.data = [];
// 从全部数据中查找name、age、sex,找到后添加到列表中
for (var i in oldData) {
// name和age、sex 只要满足其中一个要求就可以添加到列表
var item = oldData[i];
// name相等,添加列表
if (item.name == name) {
$scope.data.push(item);
continue;
}
// age在区间,添加列表,age = json对象,如:{txt: "70~80", min: 70, max: 80 }
if (item.age >= age.min && item.age <= age.max) {
$scope.data.push(item);
continue;
}
// sex相等,添加列表
if (item.sex == sex) {
$scope.data.push(item);
continue;
}
}
};
});
</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>
ionic练习(5)- 用户管理(查询信息)
最新推荐文章于 2020-03-09 10:00:46 发布