AngularJS 实现添加查询功能

最新推荐文章于 2024-05-31 09:39:36 发布

一坨英俊的屎

最新推荐文章于 2024-05-31 09:39:36 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/wq857260622/article/details/78561130

版权

直接来一个简单的案例

如下图:

技术要求:

实现图中所有元素(页面规整)。
实现文案效果(按效果显示)。
实现查询功能，并且判断敏感词。查询后列表变化。
实现倒序和正序排序，排序列表可以下拉。
实现添加球员，判断所添加的球员，如已存在则不添加，如不存在则显示在表格内。

源码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
		
			.mm1{
				margin-left: 250px;
			}
			
			.mm2{
				margin-top: 20px;
			}
			
			.mm{
				margin-left: 165px;
			}
			
			.content{
				margin-top: 20px;
				margin-left: 250px;
				display: flex;
				flex-direction: row;
			}
			
			.left{
				flex: 1;
			}
			
			.right{
				flex: 1;
			}
			
			.left input{
				width: 500px;
				height: 30px;
			}
			
			.right select{
				width: 500px;
				height: 30px;
			}
			
			table{
				margin-top: 20px;
				width: 1220px;
				margin-left: 310px;
			}
			
			#add{
				margin-top: 20px;
				margin-left: 250px;
				background: #33CCFF;
				border-radius: 4px;
				width: 80px;
				height: 30px;
			}
			
		</style>
		
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">

		<div class="mm2">
			<span class="mm1">姓名:<input type="text" id="name" /></span>
			<span class="mm">位置:<input type="text" id="weizhi" /></span>
			<span class="mm">球号:<input type="text" id="qiuhao" /></span>
			<span class="mm">票数:<input type="text" id="piaoshu" /></span>
		</div>
		

		<br />

		<div class="content">
			<div class="left">
				<span>
					查询
				</span>
				<br />
				<input type="text" ng-keydown="cha($event)" id="chaName" />
			</div>
			<div class="right">
				<span>
					排序
				</span>
				<br />
				<select ng-model="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang = names[0]" ng-change="change()"></select>
			</div>
		</div>
		
		<input type="button" id="add" value="添加球员" ng-click="add()" class="button-dark" />

		<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
			<tr style="background: #999999;">
				<td align="center">姓名</td>
				<td align="center">位置</td>
				<td align="center">球号</td>
				<td align="center">票数</td>
			</tr>
			<tr ng-repeat="p in persons">
				<td align="center">{{p.name|myFilter}}</td>
				<td align="center">{{p.weizhi}}</td>
				<td align="center">{{p.qiuhao}}</td>
				<td align="center">{{p.piaoshu}}</td>
			</tr>
		</table>
		
		
		
		
		
		<script type="text/javascript">
			
			//创建模型
			var mo = angular.module("myApp",[]);
			
			//定义过滤器，过滤敏感词   比如：马--*
			mo.filter("myFilter",function(){//参数1：过滤器的名字，参数2.方法
					
				return function(input){//input---要过滤的数据
						
						
					var newInput = input.replace(/马/g,"*");//参数1：正则，要替换的内容   参数2：新的内容
						
					return newInput;
				}
					
			});
			
			//创建控制器
			mo.controller("myCtrl",function($scope){
				
				//下拉框显示的数据
				$scope.names = ["升序","降序"];
				
				//初始化数据
				$scope.persons = [{
					"name":"梅西",
					"weizhi":"前锋",
					"qiuhao":10,
					"piaoshu":100
				},{
					"name":"内马尔",
					"weizhi":"前锋",
					"qiuhao":11,
					"piaoshu":80
				},{
					"name":"贝克汉姆",
					"weizhi":"前锋",
					"qiuhao":10,
					"piaoshu":90
				}];
				
				//添加
				$scope.add = function(){
					
					//取得用户输入的数据
					var name = $("#name").val();
					var weizhi = $("#weizhi").val();
					var qiuhao = $("#qiuhao").val();
					var piaoshu = $("#piaoshu").val();
					
					//判断用户输入的信息
					if (name == "") {
						//弹窗提醒
						alert("姓名不能为空");
						return;
					}
					
					//验证用户输入的信息是否与表格中的信息重复
					for (var i = 0;i<$scope.persons.length;i++) {
						var p0 = $scope.persons[i];
						var pname = p0.name;
						//判断是否重复
						if (pname==name) {
							//弹框提醒
							alert("输入姓名重复");
							return;
						}
					}
					
					//如果输入信息无误,则添加
					var newPerson = {
						"name":name,
						"weizhi":weizhi,
						"qiuhao":qiuhao,
						"piaoshu":piaoshu
					};
					
					//替换
					$scope.persons.push(newPerson);
					
				}
				
				//排序
				$scope.change = function(){
					
					var xx = $scope.xuanxiang;
					
					//判断用户所选择的排序方式
					if (xx == "升序") {//升序
						$scope.persons.sort(function(a,b){
							if (a.piaoshu<b.piaoshu) {
								return-1;
							}else if (a.piaoshu>b.piaoshu) {
								return 1;
							}
							return 0;
						});
					}else{//降序
						$scope.persons.sort(function(a,b){
							if (a.piaoshu<b.piaoshu) {
								return 1;
							}else if (a.piaoshu>b.piaoshu) {
								return -1;
							}
							return 0;
						});
					}
					
				}
				
				//查询事件
				$scope.cha = function($event){
					
					var key = $event.keyCode;
					//判断键盘事件
					if(key==13){
						//获取用户输入的信息
						var name1 = $("#chaName").val();
						//创建一个新的数组
						var newPersons = [];
						for (var i=0;i<$scope.persons.length;i++) {
							if(name1==$scope.persons[i].name){
								newPersons.push($scope.persons[i]);
							}
						}
						//将数据替换
						$scope.persons = newPersons;
					}
					
				}
				
			});
			
		</script>

	</body>

</html>

一坨英俊的屎

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 实现添加查询功能

直接来一个简单的案例如下图:技术要求:实现图中所有元素(页面规整)。实现文案效果(按效果显示)。实现查询功能，并且判断敏感词。查询后列表变化。实现倒序和正序排序，排序列表可以下拉。实现添加球员，判断所添加的球员，如已存在则不添加，如不存在则显示在表格内。源码： .mm1{ margin
复制链接

扫一扫