本篇文章為大家展示了如何正確的使用AngularJS 過濾器，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

在成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)過程中，需要針對客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

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

如果我們的所有數(shù)據(jù)查詢都放在后臺的話。依據(jù)拼接的查詢條件，選擇區(qū)域、所在單位、從事專業(yè)查詢的是人員表，而選擇資格證名稱、有效期至查詢的是人員資質(zhì)表。

過濾器思路

過濾器，本質(zhì)就是一個(gè)方法，輸入什么，然后輸出什么。

符合此處需求傳入的參數(shù)應(yīng)該為人員，資格證名稱，有效期至，然后輸出為處理過的人員。

過濾人員的人員資質(zhì)，可能對于不熟悉本項(xiàng)目的人不容易理解，所以這里以人和電腦為例，一個(gè)人，可以有多個(gè)電腦，需求是將這個(gè)人的不符合過濾條件的電腦從數(shù)組中移除。

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

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

V層過濾的問題

因?yàn)榇颂幍目荚u員查詢需要進(jìn)行分頁，因?yàn)閿?shù)據(jù)量較少，所以計(jì)劃在前臺分頁。

分頁之后，那循環(huán)中的users就是我們分頁完的人。

假如一共有兩頁數(shù)據(jù)，每頁十條，第一頁有一條符合的，第二頁有三條符合的，如果使用者在第一頁進(jìn)行過濾，那最后顯示出來的就是一條數(shù)據(jù)，顯示不出第二頁符合條件的數(shù)據(jù)。

C層過濾

原來是先在C層分頁，然后在V層進(jìn)行過濾，為了避免分頁引起的數(shù)據(jù)過濾錯(cuò)誤，所以決定將過濾器放到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，然后還要在命名上大致描述這個(gè)過濾器的功能，這就使得過濾器的名稱很長，再加上Filter，那就更長了，完全沒必要。畢竟$filter中的字符串還是可以讓他人去直接粘貼然后Ctrl + P直接查詢到這個(gè)過濾器。

上述內(nèi)容就是如何正確的使用AngularJS 過濾器，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。