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

最新推荐文章于 2018-10-18 19:47:32 发布

葡萄干是个程序员

最新推荐文章于 2018-10-18 19:47:32 发布

阅读量7.1k

点赞数 2

分类专栏： Web前端文章标签： angularjs 过滤器表头排序表格搜索

本文链接：https://blog.csdn.net/qq_15096707/article/details/52269872

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

使用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: '小哩', sex: '男', age: 27, score: 87},
				{name: '小欣', sex: '女', age: 28, score: 86},
				{name: '小白', sex: '女', age: 23, score: 97}
			];

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