AngularJS 的小demo——表头排序+表格搜索（过滤器）

使用AngularJS简单实现表头排序和表格搜索的功能，效果如下：

点击表头中的一项，可以根据该列属性对数据进行排序：

程序如下：

<!DOCTYPE html>
<html lang="en" ng-app="a3_4">
<head>
	<Meta charset="UTF-8">
	<title>AngularJS 过滤器-表头排序+表格搜索</title>
	<style>
		body {font-size: 20px;}
		ul {list-style-type: none; width: 408px; margin: 0; padding: 0;}
		ul li {float: left; background-color: #999; border-bottom: 1px solid #DDD;}
		ul li:nth-child(2n) {background-color: #CCC;}
		ul .bold {font-weight: bold; cursor: pointer;}
		ul li span {width: 52px; float: left; padding: 10px 10px; text-align: center; color: #FFF;}
		ul li:first-child span:hover {background-color: #DDD; color: #999;}
		ul .focus {background-color: #ccc;}
		.form-control {padding: 10px 5px; outline: none; border: 1px solid #ABCDEF;}
		.form-control:focus {border-color: #999;}
	</style>
</head>
<body>
	<div ng-controller="c3_4">
		<div><input class="form-control" type="text" ng-model="key" placeholder="请输入姓名关键字"/></div>
		<br/>
		<ul>
			<li ng-class="{{bold}}">
				<span>序号</span>
				<span ng-click="title = 'name'; desc = !desc">姓名</span>
				<span ng-click="title = 'sex'; desc = !desc">性别</span>
				<span ng-click="title = 'age'; desc = !desc">年龄</span>
				<span ng-click="title = 'score'; desc = !desc">分数</span>
			</li>
			<li ng-repeat="stu in data | filter: {name: key} | orderBy: title : desc">
				<span>{{$index + 1}}</span>
				<span>{{stu.name}}</span>
				<span>{{stu.sex}}</span>
				<span>{{stu.age}}</span>
				<span>{{stu.score}}</span>
			</li>
		</ul>
	</div>
	<script src="../assets/angularjs/angular-1.3.0.js"></script>
	<script>
		var a3_4 = angular.module('a3_4',[]);
		a3_4.controller('c3_4',['$scope',function($scope) {
			$scope.bold = "bold";
			$scope.title = 'name';
			$scope.desc = 0;
			$scope.data = [
				{name: '小明',sex: '男',age: 24,score: 95},{name: '小哩',age: 27,score: 87},{name: '小欣',sex: '女',age: 28,score: 86},{name: '小白',age: 23,score: 97}
			];

			$scope.key = '';
		}]);
	</script>
</body>
</html>

AngularJS 的小demo——表头排序+表格搜索（过滤器）

相关文章