angular js 正序倒叙

最新推荐文章于 2022-07-25 00:21:44 发布

weixin_30341735

最新推荐文章于 2022-07-25 00:21:44 发布

阅读量141

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zihang814/p/7718576.html

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	table{
	border-collapse: collapse;
	}
	td{
	padding: 10px;
	border: 1px solid #000;
	}
	</style>
	<script src="../angular-1.5.5/angular.min.js"></script>
	<script>
	var myapp=angular.module("myapp",[]);
	myapp.controller("myCtrl",function($scope){
	$scope.data=[{
	name:"张三",
	wz:"控球后卫",
	num:"11",
	ps:"999"
	},{
	name:"李四",
	wz:"大前锋",
	num:"21",
	ps:"888"
	},{
	name:"王五",
	wz:"小前锋",
	num:"23",
	ps:"777"
	},{
	name:"赵六",
	wz:"中锋",
	num:"10",
	ps:"666"
	},{
	name:"周七",
	wz:"得分后卫",
	num:"1",
	ps:"555"
	}];
	$scope.search="";
	$scope.search2="";
	$scope.$watch("search",function(value){
	console.log(value);
	if(value.indexOf("枪")!=-1){
	alert("包含敏感字");
	$scope.search="";
	}else{
	$scope.search2=$scope.search;
	}
	});
	//选择排序部分
	$scope.sort="--请选择--";
	//$scope.revers=null;
	$scope.fun=function(){
	if($scope.sort!="--请选择--"){
	if($scope.sort=="票数倒序"){
	$scope.revers=true;
	}else if($scope.sort=="票数正序"){
	$scope.revers=false;
	}
	}
	};
	//新增球员部分
	$scope.show=false;
	$scope.add=function(){
	$scope.show=true;
	};
	$scope.push=function(){
	for(var i=0;i<$scope.data.length;i++){
	if($scope.name==$scope.data[i].name){
	alert("重复");
	return;
	}
	}
	$scope.data.push({name:$scope.name,wz:$scope.wz,num:$scope.num,ps:$scope.ps});
	};
	console.log(angular.isNumber(0));
	})
	</script>
	</head>
	<body ng-app="myapp" ng-controller="myCtrl">
	<span>查询</span>
	<input type="text" ng-model="search">
	<span>排序</span>
	<select ng-model="sort" ng-change="fun()">
	<option>--请选择--</option>
	<option>票数倒序</option>
	<option>票数正序</option>
	</select><br/>
	<button ng-click="add()">新增球员</button>
	<table>
	<thead>
	<tr>
	<td>姓名</td>
	<td>位置</td>
	<td>球号</td>
	<td>票数</td>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in data\|filter:search2\|orderBy:'ps':revers">
	<td>{{item.name}}</td>
	<td>{{item.wz}}</td>
	<td>{{item.num}}</td>
	<td>{{item.ps}}</td>
	</tr>
	</tbody>
	</table>
	<table ng-show="show">
	<tr>
	<td>姓名</td>
	<td><input type="text" ng-model="name"></td>
	</tr>
	<tr>
	<td>位置</td>
	<td><input type="text" ng-model="wz"></td>
	</tr>
	<tr>
	<td>球号</td>
	<td><input type="text" ng-model="num"></td>
	</tr>
	<tr>
	<td>票数</td>
	<td><input type="text" ng-model="ps"></td>
	</tr>
	<tr>
	<td colspan="2"><button ng-click="push()">添加</button></td>
	</tr>
	</table>
	</body>
	</html> . . .. ... . ..... .. .. . . . . . . . . . . . ..