AngularJS過濾器-排序
時間：2018-09-27 來源：未知
1、AngularJS過濾器能做什么
AngularJS過濾器很強大，能把一些本來復雜化的功能簡單化，例如：在做web開發的時候，相信很多程序員都做過列表的排序功能，通常我們的做法是要寫一個排序的sql查詢語句，然后通過ajax從后端把數據取出來，后顯示到頁面上。傳統做法過程復雜，而且要訪問數據庫。而AngularJS的過濾器只需通過幾行簡單的前端代碼，而且無需訪問數據庫，直接在前端頁面就完成了排序功能。下面我就來講下怎么實現
2、列表排序功能的實現
我們要實現一個這樣排序的功能，如下圖：一個列表里我們鼠標點擊表頭的數量，單價，生產日期，都能按照數量，單價，生產日期來進行排序
降序效果圖
實現步驟：
一：引入包angularjs.min.js
二：先用 angularjs完成表格內容的實現,如圖
Html代碼
AngularJS代碼
三：在控制器聲明一個變量 $scope.selectedThree=””這個變量作用后面再講。如下圖
四：在html代碼里給表頭數量，單價，生成日期添加angularJs的點擊事件，如圖
ng-click="selectedThree='count'"這句代碼的意思當我們點擊表頭數量的時候，就把數量對應列名count傳值給變量selectedThree,同理 單價和生產日期的點擊事件也是如此
五：在表內容的tr里的ng-repeat標簽增加如下代碼| orderBy:selectedThree:!desc 如圖
‘|’是過濾器的語法規則表示符號 ‘|’前面是要過濾器的對象，后面是過濾的規則
‘:’也是過濾器的語法規則符號，
orderBy 是過濾器里的關鍵字，排序的意思
selectedThree是我們聲明的變量名，它記錄了鼠標每次點擊的列名
!desc 是降序 desc是升序
orderBy:selectedThree:!desc 這句代碼的意思就是表格數據根據傳過來列名進行降序排序
六：好了，現在就可以測試一下angulaJS的簡單而又強大的排序功能了
