AngularJS实现数据的过滤与排序

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

完整代码
index.html

	
		
		
	
	
	
		

		

			
学习计划完成情况表
	
			
			
			  

            	

            		
姓名 
            		
学号 
            		
一周学习安排 
            		
完成情况 
            		
            	
            	

            		
{{plane.name}}
            		
{{plane.num}}
            		
{{plane.anpai}}
            		
{{plane.achieve}}
            	
            	
            
		
	
	
	
	

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);
	};
}]);

运行效果

点击学号

点击完成情况

在筛选框中输入关键字（如java）

html的背景图片：