AngularJS 過濾器

BlackFlagBin 發布于2019-08-26 11:57 / 1547人閱讀

摘要：層過濾原來是先在層分頁，然后在層進行過濾，為了避免分頁引起的數據過濾錯誤，所以決定將過濾器放到層使用，先過濾，后分頁。畢竟中的字符串還是可以讓他人去直接粘貼然后直接查詢到這個過濾器。

小數據量查詢思路

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

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

查詢都放到后臺，這種以我們固有的思路去設計是可以實現的。

那就寫兩個接口，一個根據區域、所在單位、從事專業查詢人員表，一個根據資格證名稱、有效期至、區域、所在單位、從事專業查詢人員資質表。不過是拼接謂語時多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直接查詢到這個過濾器。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107908.html

Day 2: AngularJS —— 對AngularJS的初步認識

摘要：開始使用現在創建一個名為的文件，它將會是一個基于的網上書店應用。這將初始化應用程序，并告訴要在這一部分活躍。將為每個元素增加元素。控制器和視圖之間的粘合劑，而且會注入到。現在我們添加書籍數組的對象到對象，這個對象對視圖是可見的。編者注：我們發現了比較有趣的系列文章《30天學習30種新技術》，準備翻譯，一天一篇更新，年終禮包。以下是第二天技術的譯文。昨晚我完爆了一天一技術的任務...

joyqi 2019-08-19 14:24 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調用封裝的方法，簡化操作傳統方式是用get方式獲取元素，然后點方法 jQuery庫實現了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0
理解和學習AngularJS（一）

摘要：為指令賦值函數名，即可運行。它也是一個對象，指向應用程序作用域內的所有元素和執行上下文。簡而言之，是與指令元素相關聯的當前作用域，可以理解為視圖和控制器間的一個通道。它們被組織為模塊形式，之后可以被另一個引用。 Angularjs Angular是一款主旋律的MVVM框架，框架和傳統的庫不同：類庫是一些函數的集合，它能幫助你寫WEB應用。起主導作用的是你的代碼，由你來決定何時使用類...

EastWoodYang 2019-08-22 10:58 評論0 收藏0
你的第一個AngularJS應用

摘要：從最重要的頁面開始吧錦標賽的表格。重啟你的應用，看看搜索框。然后我們加入兩個路由一個轉向錦標賽表格，另一個轉向車手詳情。你所需要做的只是創建一個名為的文件，然后將錦標賽表格放在那里。結論我們已經介紹了開發一個簡單應用所需的一切。 AngularJS是Google開源出來的一款 Javascript MVC 框架。利用AngularJS，你可以構建結構清晰、便于測試和維護的前端應用。 ...

shadajin 2019-08-19 14:25 評論0 收藏0