angularjs排序、查询、添加

最新推荐文章于 2023-08-14 16:23:30 发布

葛村野人

最新推荐文章于 2023-08-14 16:23:30 发布

阅读量185

点赞数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.left{
				float: left;
			}
			.right{
				float: right;
			}
			.even{
				background-color: blue;
			}
			.odd{
				background-color: greenyellow;
			}
			.first{
				background-color: yellow;
			}
			.f{
				background-color: aquamarine;
			}
			.d{
				background-color: green;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/angular-route.js" ></script>
		<script>
			$(function(){
				$("thead tr").addClass("first");
				$("tbody tr:even").addClass("even");
				$("tbody tr:odd").addClass("odd");
				
				$("tbody tr").mousemove(function(){
					//alert("asdf");
					$(this).addClass("f");
				});
				$("tbody tr").mouseout(function(){
					//alert("asdf");
					$(this).removeClass("f");
				});
				$("#tr td").mousedown(function(){
					//alert("asdf");
					$(this).addClass("d");
				});
				$("#tr td").mouseup(function(){
					//alert("asdf");
					$(this).removeClass("d");
				});
			});
		</script>
		<script>
			var app = angular.module("myApp",["ngRoute"]);
			//定义路由器
			app.config(["$routeProvider",function($routeProvider){
				//使用$routeProvider服务，配置路由规则
				$routeProvider
					.when("/addPlayer",{
						controller:"addPlayerCtrl",
						templateUrl:"addPlayer.html"
					})
					.otherwise({redirectTo:"/addPlayer"});
			}]);
			//自定义过滤器
			app.filter("myFilter",function(){
				return function(text){
					if(text.indexOf("敏感字符")>=0){
						//替换字符串
						return text.replace(/敏感字符/g,"****");
					}else{
						return text;
					}
				}
			});
			
			app.controller("myCtrl",function($scope,$location){
				//定义数据源
				$scope.players = [{
					name:"张三",
					place:"控球后卫",
					num:11,
					ticket:999
				},{
					name:"李四",
					place:"大前锋",
					num:21,
					ticket:888
				},{
					name:"王五",
					place:"小前锋",
					num:23,
					ticket:777
				},{
					name:"赵六",
					place:"中锋",
					num:10,
					ticket:666
				},{
					name:"周七",
					place:"得分后卫",
					num:1,
					ticket:555
				}];
				
				$scope.order = "-ticket";
				
				//点击事件触发路由路径：跳转
				$scope.goToUrl = function(){
					$location.path("/addPlayer");
				}
			});
			
			//添加用户的控制器
			app.controller("addPlayerCtrl",function($scope){
				$scope.name = "";
				$scope.place = "";
				$scope.num = "";
				$scope.ticket = "";
				//点击添加按钮，执行sub方法
				$scope.sub = function(){
					var flag1 = flag2 = flag3 = flag4 = false;
					
					if($scope.name == null || $scope.name == ""){
						alert("球员名不能为空");
						flag1 = false;
					}else {
						var flag = true;
						for(player in $scope.players){
							if($scope.players[player].name == $scope.name){
								alert("重复")
								flag = false;
								flag1 = false;
							}
							
						}
						if(flag){
							flag1 = true;
						}else{
							
						}
					}
					if($scope.place == null || $scope.place == ""){
						alert("位置不能为空");
						flag2 = false;
					}else{
						flag2 = true;
					}
					if($scope.num == null || $scope.num == ""){
						alert("球号不能为空");
						flag3 = false;
					}else{
						flag3 = true;
					}
					if($scope.ticket == null || $scope.ticket == ""){
						alert("票数不能为空");
						flag4 = false;
					}else{
						flag4 = true;
					}
					
					//判断添加用户
					if(flag1 && flag2 && flag3 && flag4){
						//如果都为true即输入框都不为空，添加用户
						var palyer = {
							name:$scope.name,
							place:$scope.place,
							num:$scope.num,
							ticket:parseInt($scope.ticket)
						};
						//将用户添加到数据源
						$scope.players.push(palyer);
					}
				}
			});
		</script>
		
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<div style="width: 500px;">
				<div class="left">
					查询<br/>
					<input type="text" ng-model="search "/>
				</div>
				<div class="right">
					排序<br/>
					<select ng-model="order">
						<option value="-ticket">票数倒叙</option>
						<option value="ticket">票数正叙</option>
						<option value="-num">球号倒叙</option>
						<option value="num">球号正叙</option>
					</select>
				</div>
			</div>
			<button ng-click="goToUrl()" style="margin-top: 80px;">新增球员</button><br /><br />
			<table border="1 solid blue" cellpadding="20" cellspacing="0">
				<thead>
					<tr>
						<th>姓名</th>
						<th>位置</th>
						<th>球号</th>
						<th>票数</th>
					</tr>
				</thead>
				<tbody>
					<tr id="tr" ng-repeat="player in players | filter:search | orderBy:order">
						<td>{{player.name}}</td>
						<td>{{player.place}}</td>
						<td>{{player.num}}</td>
						<td>{{player.ticket}}</td>
					</tr>
				</tbody>
			</table>
			<br />
			<div ng-view>
				
			</div>
			
		</center>
		
		<!-- 添加球员显示页面 -->
		<script type="text/ng-template" id="addPlayer.html">
			<form>
				姓名:<input type="text" ng-model="name"/><br/>
				位置:<input type="text" ng-model="place"/><br />
				球号:<input type="text" ng-model="num"/><br />
				票数:<input type="text" ng-model="ticket"/><br />
				<input type="button" value="添加"  ng-click="sub()"/>
			</form>
		</script>
		
	</body>
</html>

葛村野人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs排序、查询、添加

.left{ float: left; } .right{ float: right; } .even{ background-color: blue; } .odd{ background-color: greenyellow; } .first{ background-color: yellow; }
复制链接

扫一扫