本篇文章為大家展示了如何正確的使用AngularJS 過(guò)濾器，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
考評(píng)員綜合查詢，查詢條件有：區(qū)域、所在單位、從事專業(yè)、資格證名稱、有效期至。
如果我們的所有數(shù)據(jù)查詢都放在后臺(tái)的話。依據(jù)拼接的查詢條件，選擇區(qū)域、所在單位、從事專業(yè)查詢的是人員表，而選擇資格證名稱、有效期至查詢的是人員資質(zhì)表。
過(guò)濾器思路
過(guò)濾器，本質(zhì)就是一個(gè)方法，輸入什么，然后輸出什么。
符合此處需求傳入的參數(shù)應(yīng)該為人員，資格證名稱，有效期至，然后輸出為處理過(guò)的人員。
過(guò)濾人員的人員資質(zhì)，可能對(duì)于不熟悉本項(xiàng)目的人不容易理解，所以這里以人和電腦為例，一個(gè)人，可以有多個(gè)電腦，需求是將這個(gè)人的不符合過(guò)濾條件的電腦從數(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層過(guò)濾的問(wèn)題
因?yàn)榇颂幍目荚u(píng)員查詢需要進(jìn)行分頁(yè)，因?yàn)閿?shù)據(jù)量較少，所以計(jì)劃在前臺(tái)分頁(yè)。
分頁(yè)之后，那循環(huán)中的users就是我們分頁(yè)完的人。
假如一共有兩頁(yè)數(shù)據(jù)，每頁(yè)十條，第一頁(yè)有一條符合的，第二頁(yè)有三條符合的，如果使用者在第一頁(yè)進(jìn)行過(guò)濾，那最后顯示出來(lái)的就是一條數(shù)據(jù)，顯示不出第二頁(yè)符合條件的數(shù)據(jù)。
C層過(guò)濾
原來(lái)是先在C層分頁(yè)，然后在V層進(jìn)行過(guò)濾，為了避免分頁(yè)引起的數(shù)據(jù)過(guò)濾錯(cuò)誤，所以決定將過(guò)濾器放到C層使用，先過(guò)濾，后分頁(yè)。
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官方給出的寫(xiě)法，直接過(guò)濾器名加上Filter可以直接依賴注入過(guò)濾器，例如我們這里的過(guò)濾器叫做yunzhiComputer，我們可以直接依賴注入yunzhiComputerFilter。
How to use a filter in a controller - StackOverflow
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}這是StackOverflow上給出的寫(xiě)法，我比較喜歡這種寫(xiě)法，畢竟我們寫(xiě)過(guò)濾器，為了防止和已有的庫(kù)沖突，所以我們要將過(guò)濾器加上前綴yunzhi，然后還要在命名上大致描述這個(gè)過(guò)濾器的功能，這就使得過(guò)濾器的名稱很長(zhǎng)，再加上Filter，那就更長(zhǎng)了，完全沒(méi)必要。畢竟$filter中的字符串還是可以讓他人去直接粘貼然后Ctrl + P直接查詢到這個(gè)過(guò)濾器。
上述內(nèi)容就是如何正確的使用AngularJS 過(guò)濾器，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
