angular 添加查询

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

程序猿的使命

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

阅读量319

点赞数

本文链接：https://blog.csdn.net/l15210173802/article/details/78301702

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	table{
	border-collapse: collapse;
	}
	</style>
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script>
	var myapp=angular.module("myapp",[]);
	myapp.controller("myCtrl",function($scope){
	$scope.users=[
	{
	'url':"images/1.png",
	'name':"Westbrook",
	'wz':"得分后卫（SG）",
	"age":24,
	"qd":"雷霆",
	"page":1900
	},
	{
	'url':"images/2.png",
	'name':"James",
	'wz':"大前锋（PF）",
	"age":23,
	"qd":"骑士",
	"page":1900
	},
	{
	'url':"images/3.png",
	'name':"Curry",
	'wz':"得分后卫（SG）",
	"age":30,
	"qd":"勇士",
	"page":1800
	},
	{
	'url':"images/4.png",
	'name':"Harden",
	'wz':"小前锋（SG）",
	"age":13,
	"qd":"火箭",
	"page":1800
	},
	{
	'url':"images/5.png",
	'name':"Durant",
	'wz':"得分后卫（SG）",
	"age":35,
	"qd":"勇士",
	"page":1712
	}
	];
	//年龄范围过滤
	$scope.ageSize="--请选择--";
	$scope.fun=function(){
	console.log($scope.ageSize);
	};
	$scope.ageFilter=function(item){
	//console.log(item.age);
	if($scope.ageSize!="--请选择--"){
	var ageSize=$scope.ageSize;
	var ageArr=ageSize.split("-");
	var min=ageArr[0];
	var max=ageArr[1];
	var age=item.age;
	if(age>max\|\|age<min){
	return false
	}else{
	return true;
	}
	}else{
	return true;
	}

	};





	$scope.add=function(user){
	console.log(user);
	user.page++;
	};
	$scope.addNew=function(){
	$scope.users.push({'url':"images/5.png",'name':$scope.name,'wz':$scope.wz,"age":$scope.age,"qd":$scope.team,"page":0})
	};
	})
	</script>
	</head>
	<body ng-app="myapp" ng-controller="myCtrl">
	<div>
	<h2>添加新球员</h2>
	<div>姓名:<input type="text" ng-model="name"></div>
	<div>位置:<input type="text" ng-model="wz"></div>
	<div>年龄:<input type="text" ng-model="age"></div>
	<div>球队:<input type="text" ng-model="team"></div>
	<button ng-click="addNew()">添加新球员</button>
	</div>
	<h3>用户信息表</h3>
	<div>
	<input placeholder="用户名查询" size="10" />
	<!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
	年龄：
	<select ng-model="ageSize">
	<option>--请选择--</option>
	<option>11-20</option>
	<option>21-30</option>
	<option>31-40</option>
	<option>41-50</option>
	<option>51-60</option>
	</select>
	</div>
	<div>
	<table border="1" cellpadding="10">
	<thead>
	<tr>
	<th>球员</th>
	<th>姓名</th>
	<th>位置</th>
	<th>年龄</th>
	<th>球队</th>
	<th>得票数</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="user in users\|filter:ageFilter" >
	<td><img src="{{user.url}}"></td>
	<td>{{user.name}}</td>
	<td>{{user.wz }}</td>
	<td>{{user.age}}</td>
	<td>{{user.qd }}</td>
	<td>{{user.page}}</td>
	<td><button ng-click="add(user)">投票</button></td>
	</tr>
	</tbody>
	</table>
	</div>
	</body>
	</html>

程序猿的使命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular 添加查询

lang="en"> charset="UTF-8"> Title table{ border-collapse: collapse; } src="http://cdn.static.runoob.com/libs/angular.js/1
复制链接

扫一扫

angular 添加 查询

angular 添加查询