angular排序的实例代码

来源：动视网责编：小采时间：2020-11-27 20:18:22

angular排序的实例代码

angular排序的实例代码:说点小案例angular的排序<!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <style type="tex

推荐度：

点击下载本文 文档为doc格式

导读angular排序的实例代码:说点小案例angular的排序<!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <style type="tex

说点小案例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排序的实例代码:说点小案例angular的排序<!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <style type="tex

推荐度：

点击下载本文 文档为doc格式

标签：代码排序实例

热门焦点

angular排序的实例代码

angular排序的实例代码

angular排序的实例代码

最新推荐

猜你喜欢

热门推荐