angular查找

最新推荐文章于 2020-04-15 11:58:38 发布

yu_10_9

最新推荐文章于 2020-04-15 11:58:38 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/yu_10_9/article/details/78312492

版权

	<!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>

yu_10_9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular查找

ng-app="UMApp"> charset="UTF-8"> name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> type="text/javascript" sr
复制链接

扫一扫