angular查询

最新推荐文章于 2022-04-27 17:45:47 发布

sky的喵

最新推荐文章于 2022-04-27 17:45:47 发布

阅读量776

点赞数

本文链接：https://blog.csdn.net/sky__cat/article/details/78857199

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>查询</title>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body ng-app="app" ng-controller="kong">
		<center>
			<input type="text" ng-model="namee" placeholder="姓名查询条件" /><br />
			<input type="text" ng-model="selector" placeholder="职位查询条件" /><br />
			<select ng-change="chan()" ng-model="age" ng-="age=xs[0]">
                <option ng-repeat="x in xs">{{x}}</option>
            </select><br />
			<table cellpadding="0px" cellspacing="0px" border="1px">
				<tr>
					<td><input type="checkbox" ng-click="sel()" ng-model="selectAll" /></td>
					<th>姓名</th>
					<th>年龄</th>
					<th>拼音</th>
					<th>职位</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="g in gs|filter:search">
					<th><input type="checkbox" ng-model="xuan" /></th>
					<td>{{g.name}}</td>
					<td>{{g.age}}</td>
					<td>{{g.pin}}</td>
					<td>{{g.zhi}}</td>
					<td><a href="#" ng-click="del($index)">删除</a></td>
				</tr>
			</table>
			<input type="button" value="查询" class="i" ng-click="select()" />
			<input type="button" value="添加" class="i" ng-click="jia()" /><br />
			<fieldset ng-show="xian">
				<input type="text" placeholder="姓名" ng-model="name1" /><br />
				<input type="text" placeholder="年龄" ng-model="age1" /><br />
				<input type="text" placeholder="拼音" ng-model="pin1" /><br />
				<input type="text" placeholder="职位" ng-model="zhi1" /><br />
				<input type="button" value="保存" ng-click="cun()" />
			</fieldset>
		</center>
		<script>
			var mo = angular.module("app", []);
			mo.controller("kong", function($scope) {
				$scope.xs = ["按年龄正序排序", "按年龄倒序排序"];
				var shu = [{
					"name": "张三",
					"age": "78",
					"pin": "zhangsan",
					"zhi": "保洁"
				}, {
					"name": "李四",
					"age": "18",
					"pin": "lisi",
					"zhi": "程序员"
				}, {
					"name": "王五",
					"age": "28",
					"pin": "wangwu",
					"zhi": "boss"
				}];
				$scope.gs = shu;

				//全选
				$scope.sel = function() {
					for (var i = $scope.gs.length - 1; i >= 0; i--) {
						$scope.gs[i].flag = $scope.selectAll;
					}
					$scope.xuan = $scope.selectAll;
				}
				//职位查询
				$scope.$watch("selector",function(value){
					$scope.search=$scope.selector;
				});
				//姓名查询
				$scope.select = function() {
					var newPersons = [];
					var v = $scope.namee;
					if (v == "" || v == null) {
						alert("查询条件不能为空");
						return;
					}
					for (var i = 0; i < shu.length; i++) {
						var r = shu[i].name;
						if (r.indexOf(v) != -1) {
							newPersons.push(shu[i]);
						}
					}
					//判断
					if (newPersons.length == 0) {
						alert("没有匹配项");
						return;
					}
					$scope.gs = newPersons;
				}

			});
		</script>
	</body>

</html>