Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielcode für Winkelsortierung

零下一度
Freigeben: 2017-06-28 10:00:18
Original
992 Leute haben es durchsucht

Sprechen wir über einen kleinen Fall der Winkelsortierung

<!DOCTYPE html>
<html ng-app="mk">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			nav{
				text-align: center;
			}
			nav>*{
				vertical-align: top;
			}
			table{
				width: 100%;
				text-align: center;
			}
			table th,td{
				background: #A9A9A9;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div ng-controller="text">
			<nav>
				<select ng-model="a"> <!-- 这也是表单也有数据,她可以获取value值,这几个值代表你循环进来的每项key名 -->
					<option value="num">按编号排序</option>
					<option value="name">按姓名排序</option>
					<option value="age">按年龄排序</option>
				</select>
				<select ng-model="b">  <!-- 也同样获取value值,当为负的时候,是倒序,正序 -->
					<option value="">升序</option>
					<option value="-">降序</option>
				</select>
				<input type="text" ng-model="s"/>
			</nav>
			<table border="0px" id="table">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
				<tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 过滤器过滤以下数据 b+a这样就字符串拼接到了一起。这样数据改变就进行了排序 -->
					<td>{{value.num}}</td>
					<td>{{value.name}}</td>
					<td>{{value.age}}</td>
				</tr>
			</table>
		</div>
		
		
		<script src="js/angular.min.js?1.1.11" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=angular.module("mk",[]);
			app.controller("text",function($scope,$http){
				$http.get("paixu.json").success(function(data){
					$scope.data=data.xinxi
					$scope.a="num";
				})
			});
		</script>
	</body>
</html>
Nach dem Login kopieren

 

Das obige ist der detaillierte Inhalt vonBeispielcode für Winkelsortierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!