vc汽车资讯网
您的当前位置:首页angular排序的实例代码

angular排序的实例代码

来源:vc汽车资讯网


说点小案例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>

  

显示全文