您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何正確的使用AngularJS 過濾器,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
考評員綜合查詢,查詢條件有:區(qū)域、所在單位、從事專業(yè)、資格證名稱、有效期至。
如果我們的所有數(shù)據(jù)查詢都放在后臺的話。依據(jù)拼接的查詢條件,選擇區(qū)域、所在單位、從事專業(yè)查詢的是人員表,而選擇資格證名稱、有效期至查詢的是人員資質表。
過濾器思路
過濾器,本質就是一個方法,輸入什么,然后輸出什么。
符合此處需求傳入的參數(shù)應該為人員,資格證名稱,有效期至,然后輸出為處理過的人員。
過濾人員的人員資質,可能對于不熟悉本項目的人不容易理解,所以這里以人和電腦為例,一個人,可以有多個電腦,需求是將這個人的不符合過濾條件的電腦從數(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) { // 如果不符合條件,將該項從數(shù)組中移除 user.computers.splice(index, 1); } }); }); return users; }; });
ng-repeat="user in users | yunzhiComputer: 'Mac'"
V層過濾的問題
因為此處的考評員查詢需要進行分頁,因為數(shù)據(jù)量較少,所以計劃在前臺分頁。
分頁之后,那循環(huán)中的users
就是我們分頁完的人。
假如一共有兩頁數(shù)據(jù),每頁十條,第一頁有一條符合的,第二頁有三條符合的,如果使用者在第一頁進行過濾,那最后顯示出來的就是一條數(shù)據(jù),顯示不出第二頁符合條件的數(shù)據(jù)。
C層過濾
原來是先在C
層分頁,然后在V
層進行過濾,為了避免分頁引起的數(shù)據(jù)過濾錯誤,所以決定將過濾器放到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
直接查詢到這個過濾器。
上述內容就是如何正確的使用AngularJS 過濾器,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。