AngularJS實現資料的過濾與排序
阿新 • • 發佈：2018-12-27
設計一個程式：實現一個動態的學習計劃完成情況表排序過濾的設計
實驗要求：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); }; }]);
執行效果
點選學號
點選完成情況
在篩選框中輸入關鍵字（如java）
html的背景圖片：
