aWSDFG

Androidoux98
于 2018-04-07 15:03:32 发布
阅读量226
点赞数
本文链接：https://blog.youkuaiyun.com/Androidoux98/article/details/79841695
版权
<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script>
			var app = angular.module("app",[]);
			app.controller("de",function($scope){
				$scope.datas = [
					{
						"tell":123456,
						"hoby":"看书",
				        "sex": "男",
				        "id": 1,
				        "age": 21,
				        "shopname": "张三"
				    },
				    {
				        "tell":496513,
						"hoby":"打球",
				        "sex": "男",
				        "id": 2,
				        "age": 22,
				        "shopname": "李四"
				    },
				    {
				        "tell":4856132,
						"hoby":"购物",
				        "sex": "女",
				        "id": 3,
				        "age": 23,
				        "shopname": "王五"
				    },
				    {
				        "tell":245656,
						"hoby":"玩游戏",
				        "sex": "女",
				        "id": 4,
				        "age": 24,
				        "shopname": "赵六"
				    }
				];
				//查询和排序
				$scope.sname = "";
				$scope.order = "";
				//删除
				$scope.del = function($index){
					$scope.datas.splice($index,1);
				}
				//添加显示
				$scope.add = function($index){
					$scope.addzhanshi = true;
				}
				
				$scope.addshe = function(){
					$scope.datas.push({
						id:$scope.newid,
						shopname:$scope.newname,
						age:$scope.newage,
						sex:$scope.newsex,
						tell:$scope.newtell,
						hoby:$scope.newhoby
					});
				}
				
				//清空
				$scope.clear = function(){
					$scope.input1="";
				}
				
			});
		</script>
		<style>
			.box{
				width: 800px;
				height: 300px;
				margin: 0 auto;
			}
			table tr:nth-child(2n) td{
				background: #f0f;
			}
		</style>
	</head>
	<body ng-controller="de">
			<div class="box">
				<div class="head">
					年龄排序：<input type="text" placeholder="请选择"/>
					id排序：<select ng-model="order">
						<option value="">升序</option>
						<option value="-">降序</option>
					</select>
					姓名：<input type="text" ng-model="sname"/>
					<input type="button" value="添加新用户" ng-click="add()" />
				</div>
				<table border="1" cellpadding="0" cellspacing="0">
					<tr>
						<td style="width: 100px;height: 30px;text-align: center;">id</td>
						<td style="width: 100px;height: 30px;text-align: center;">姓名</td>
						<td style="width: 100px;height: 30px;text-align: center;">年龄</td>
						<td style="width: 100px;height: 30px;text-align: center;">性别</td>
						<td style="width: 100px;height: 30px;text-align: center;">联系方式</td>
						<td style="width: 100px;height: 30px;text-align: center;">爱好</td>
						<td style="width: 100px;height: 30px;text-align: center;">操作</td>
					</tr>
					<tr ng-repeat="x in datas | orderBy:order | filter:{shopname:sname}">
						<td style="width: 100px;height: 30px;text-align: center;">{{x.id}}</td>
						<td style="width: 100px;height: 30px;text-align: center;">{{x.shopname}}</td>
						<td style="width: 100px;height: 30px;text-align: center;">{{x.age}}</td>
						<td style="width: 100px;height: 30px;text-align: center;">{{x.sex}}</td>
						<td style="width: 100px;height: 30px;text-align: center;">{{x.tell}}</td>
						<td style="width: 100px;height: 30px;text-align: center;">{{x.hoby}}</td>
						<td style="width: 100px;height: 30px;text-align: center;"><input type="button" value="删除" ng-click="del($index)"</td>
					</tr>
				</table>
			</div>
			<div ng-show="addzhanshi" style="width: 800px;height: 150px;margin: 0 auto;">
				-------------------添加用户-------------------<br />
				id:<input type="text" ng-model="newid" /><br />
				姓名：<input type="text" ng-model="newname"/><br />
				年龄：<input type="text" ng-model="newage"/><br />
				性别：<input type="text" ng-model="newsex"/><br />
				联系方式：<input type="text" ng-model="newtell"/><br />
				爱好：<input type="text" ng-model="newhoby"/><br />
				<input type="button" value="添加" ng-click="addshe()" />
				<input type="button" value="清空" ng-click="clear()" ng-model="input1" />		
			</div>
	</body>
</html>