设计一个程序：实现一个动态的学习计划完成情况表排序过滤的设计
实验要求：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的背景图片：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！