AngularJS 過濾器

小數據量查詢思路

考評員綜合查詢，查詢條件有：區域、所在單位、從事專業、資格證名稱、有效期至。

若是咱們的全部數據查詢都放在後臺的話。依據拼接的查詢條件，選擇區域、所在單位、從事專業查詢的是人員表，而選擇資格證名稱、有效期至查詢的是人員資質表。

查詢都放到後臺，這種以咱們固有的思路去設計是能夠實現的。

那就寫兩個接口，一個根據區域、所在單位、從事專業查詢人員表，一個根據資格證名稱、有效期至、區域、所在單位、從事專業查詢人員資質表。不過是拼接謂語時多join幾下罷了。

而後前臺監聽用戶選中的查詢條件，根據不一樣的查詢條件去請求相應的接口。

雖然這樣能夠實現，可是此處的考評員的數量不會不少，咱們大能夠根據區域、所在單位、從事專業查詢人員，OneToMany直接將相應的人員資質帶出來，而後再根據用戶選中的資格證名稱和有效期至做爲條件對人員資質進行過濾，在前臺過濾出用戶想要的數據。

過濾器思路

過濾器，本質就是一個方法，輸入什麼，而後輸出什麼。

符合此處需求傳入的參數應該爲人員，資格證名稱，有效期至，而後輸出爲處理過的人員。

過濾人員的人員資質，可能對於不熟悉本項目的人不容易理解，因此這裏以人和電腦爲例，一我的，能夠有多個電腦，需求是將這我的的不符合過濾條件的電腦從數組中移除。

webApp.filter('yunzhiComputer', function() {
    return function(users, computerName) {
        angular.forEach(users, function(user) {
            angular.forEach(user.computers, function(computer, index) {
                if (computer.name !== computerName) {
                    // 若是不符合條件，將該項從數組中移除
                    user.computers.splice(index, 1);
                }
            });
        });
        return users;
    };
});

ng-repeat="user in users | yunzhiComputer: 'Mac'"

V層過濾的問題

由於此處的考評員查詢須要進行分頁，由於數據量較少，因此計劃在前臺分頁。

分頁以後，那循環中的users就是咱們分頁完的人。

假如一共有兩頁數據，每頁十條，第一頁有一條符合的，第二頁有三條符合的，若是使用者在第一頁進行過濾，那最後顯示出來的就是一條數據，顯示不出第二頁符合條件的數據。

C層過濾

原來是先在C層分頁，而後在V層進行過濾，爲了不分頁引發的數據過濾錯誤，因此決定將過濾器放到C層使用，先過濾，後分頁。

Filter - AngularJS

angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function FilterController(filterFilter) {
  this.array = [
    {name: 'Tobias'},
    {name: 'Jeff'},
    {name: 'Brian'},
    {name: 'Igor'},
    {name: 'James'},
    {name: 'Brad'}
  ];
  this.filteredArray = filterFilter(this.array, 'a');
}]);

第一種是AngularJS官方給出的寫法，直接過濾器名加上Filter能夠直接依賴注入過濾器，例如咱們這裏的過濾器叫作yunzhiComputer，咱們能夠直接依賴注入yunzhiComputerFilter。

How to use a filter in a controller - StackOverflow

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

這是StackOverflow上給出的寫法，我比較喜歡這種寫法，畢竟咱們寫過濾器，爲了防止和已有的庫衝突，因此咱們要將過濾器加上前綴yunzhi，而後還要在命名上大體描述這個過濾器的功能，這就使得過濾器的名稱很長，再加上Filter，那就更長了，徹底不必。畢竟$filter中的字符串仍是可讓他人去直接粘貼而後Ctrl + P直接查詢到這個過濾器。