angular基本应用

最新推荐文章于 2023-02-20 16:17:39 发布

God-King

最新推荐文章于 2023-02-20 16:17:39 发布

阅读量224

点赞数 1

本文链接：https://blog.csdn.net/Mrs_Yus/article/details/78585487

版权

<html>

	<head>
		<meta charset="utf-8" />
		
		<!--
        	引入第三类库和样式
        -->
		<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">
			.content {
				margin-top: 20px;
				display: flex;
				flex-direction: row;
			}
			
			.left {
				flex: 1;
			}
			
			.right {
				flex: 1;
			}
			
			.left input {
				width: 500px;
				height: 30px;
			}
			
			.right select {
				width: 500px;
				height: 35px;
			}
			
			table {
				margin-top: 20px;
				width: 1220px;
			}
			
			#add {
				margin-top: 20px;
				background: #33CCFF;
				border-radius: 5px;
				width: 80px;
				height: 30px;
			}
		</style>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<!--
        	界面
        -->
		姓名:<input type="text" id="name" />位置:<input type="text" id="weizhi" />球号：<input type="text" id="qiuhao" />票数:<input type="text" id="piaoshu" />
		<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 class="button-dark" type="button" id="add" value="添加球员" ng-click="add()" />
		<!--
        	表格，显示数据
        -->
		<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
			<tr style="background: #999999;">
				<td>姓名</td>
				<td>位置</td>
				<td>球号</td>
				<td>票数</td>
			</tr>
			<tr ng-repeat="p in persons">
				<td>{{p.name|myFilter}}</td>
				<td>{{p.weizhi}}</td>
				<td>{{p.qiuhao}}</td>
				<td>{{p.piaoshu}}</td>
			</tr>
		</table>
		<!--
        	写完ng-app等指令
        	创建模块等操作
        -->
		<script type="text/javascript">
			var mo = angular.module("myApp", []);
			//定义过滤器，过滤敏感词   比如：马--*
				mo.filter("myFilter",function(){
					
					return function(input){//input 就是要过滤的数据
						
						
						var newInput = input.replace(/马/g,"*");//参数1：正则，要替换的内容   参数2：新的内容
						
						return newInput;
					}
					
				});//参数1：过滤器的名字，参数2.方法
			//创建控制器
			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 xz = $scope.xuanxiang;
					//判断
					if(xz=="升序"){
						$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>

God-King

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular基本应用

html> head> meta charset="utf-8" />  link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> script src="js/jquery-3.2.1.min.js" type="tex
复制链接

扫一扫