AngularJS实现数据的过滤与排序

最新推荐文章于 2024-06-21 16:54:57 发布

乐亦亦乐

最新推荐文章于 2024-06-21 16:54:57 发布

阅读量2.4k

点赞数

分类专栏：项目实战文章标签： AngularJs 数据后滤与排序

本文链接：https://blog.csdn.net/qq_41251963/article/details/83151756

版权

项目实战专栏收录该内容

9 篇文章 2 订阅

订阅专栏

设计一个程序：实现一个动态的学习计划完成情况表排序过滤的设计
实验要求：1、设计web前端界面
2、利用angularJS中的依赖注入实现数据的双向绑定
3、界面信息要包含：姓名，学号，一周学习安排，完成情况
4、进阶要求：能实现数据的过滤与排序

完整代码
index.html

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style>
		 * {
        margin: 0;
        padding: 0;
    }
    .jh{
    	 text-align: center;
        width: 720px;
        height: 470px;
        margin: 160px auto;
        
    
    }
    
    .jh table {
    	text-align: center;
    }
	th{
		cursor: pointer;
	}
	</style>
	</head>
	<body style="background-image: url(img/2.jpg); background-size:cover">
		<div ng-controller="myController">
		<div class="jh" >
			<h1>学习计划完成情况表</h1>	
			<input type="text" ng-model="filterString" />
			<input type="button" ng-click="setFilter()" value="筛选" />
			  <table border="1" cellpadding="3" cellspacing="0" style="width: 60%;margin:auto" bordercolor="skyblue">
            	<tr>
            		<th ng-click="setSort('name')">姓名 </th>
            		<th ng-click="setSort('num')">学号 </th>
            		<th ng-click="setSort('anpai')">一周学习安排 </th>
            		<th ng-click="setSort('achieve')">完成情况 </th>
            		
            	</tr>
            	<tr ng-repeat=
            		"plane in filteredPlanes | orderBy:column:reverse">
            		<td>{{plane.name}}</td>
            		<td>{{plane.num}}</td>
            		<td>{{plane.anpai}}</td>
            		<td>{{plane.achieve}}</td>
            	</tr>
            	
            </table>
		</div>
	</div>
	<script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
	<script src="js/1.js"></script>
	</body>
</html>

1.js

angular.module('myApp',[]).controller('myController',['$scope','filterFilter',
function($scope,filterFilter){
	$scope.planes=[
	{name: 'liqiang', num: '20',anpai:'study math', achieve:'yes'},
	{name:'yxy',num:'01',anpai:'learn java',achieve:'no'},
	{name: 'tom', num: '20',anpai:'study', achieve:'yes'},
	{name:'a',num:'02',anpai:'learn java',achieve:'yes'},
	{name: 'b', num: '03',anpai:'study', achieve:'yes'},
	{name:'c',num:'04',anpai:'learn java',achieve:'no'},
	{name: 'd', num: '05',anpai:'study', achieve:'yes'},
	{name:'e',num:'06',anpai:'learn java',achieve:'no'},
	
	
	];
	$scope.filteredPlanes=$scope.planes;
	$scope.reverse=true;
	$scope.column='name';
	$scope.setSort=function(column){
		$scope.column=column;
		$scope.reverse=!$scope.reverse;
	};
	$scope.filterString='';
	$scope.setFilter=function(value){
		$scope.filteredPlanes=filterFilter($scope.planes,$scope.filterString);
	};
}]);

运行效果
在这里插入图片描述