Designing a Program: Implementing a Dynamic Learning Plan to Complete the Design of Schedule Ranking and Filtering
Experiments Requirements: 1. Designing web Front-end Interface
2. Using Dependency Injection in Angular JS to Realize Bidirectional Binding of Data
3. Interface information should include: name, student number, one-week study schedule, completion
4. Advanced requirements: data filtering and sorting
Complete code
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>Schedule of Completion of Learning Plan</h1>
<input type="text" ng-model="filterString" />
<input type="button" ng-click="setFilter()" value="screen" />
<table border="1" cellpadding="3" cellspacing="0" style="width: 60%;margin:auto" bordercolor="skyblue">
<tr>
<th ng-click="setSort('name')">Full name </th>
<th ng-click="setSort('num')">Student ID </th>
<th ng-click="setSort('anpai')">Weekly study schedule </th>
<th ng-click="setSort('achieve')">Completion status </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);
};
}]);
Operation effect
Click on student ID
Click on Completion
Enter keywords (such as java) in the filter box
html background picture: