欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

angular排序的实例代码

程序员文章站 2022-04-24 20:34:49
...
说点小案例angular的排序
<!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>

  

以上就是angular排序的实例代码的详细内容,更多请关注其它相关文章!

相关标签: angular 排序