成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

AngularJS 過濾器

BlackFlagBin / 1565人閱讀

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

小數(shù)據(jù)量查詢思路

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

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

查詢都放到后臺(tái)，這種以我們固有的思路去設(shè)計(jì)是可以實(shí)現(xiàn)的。

那就寫兩個(gè)接口，一個(gè)根據(jù)區(qū)域、所在單位、從事專業(yè)查詢?nèi)藛T表，一個(gè)根據(jù)資格證名稱、有效期至、區(qū)域、所在單位、從事專業(yè)查詢?nèi)藛T資質(zhì)表。不過是拼接謂語時(shí)多join幾下罷了。

然后前臺(tái)監(jiān)聽用戶選中的查詢條件，根據(jù)不同的查詢條件去請(qǐng)求相應(yīng)的接口。

雖然這樣可以實(shí)現(xiàn)，但是此處的考評(píng)員的數(shù)量不會(huì)很多，我們大可以根據(jù)區(qū)域、所在單位、從事專業(yè)查詢?nèi)藛T，OneToMany直接將相應(yīng)的人員資質(zhì)帶出來，然后再根據(jù)用戶選中的資格證名稱和有效期至作為條件對(duì)人員資質(zhì)進(jìn)行過濾，在前臺(tái)過濾出用戶想要的數(shù)據(jù)。

過濾器思路

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

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

過濾人員的人員資質(zhì)，可能對(duì)于不熟悉本項(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(píng)員查詢需要進(jìn)行分頁，因?yàn)閿?shù)據(jù)量較少，所以計(jì)劃在前臺(tái)分頁。

分頁之后，那循環(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è)過濾器。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107908.html

相關(guān)文章

  • Day 2: AngularJS —— 對(duì)AngularJS的初步認(rèn)識(shí)

    摘要：開始使用現(xiàn)在創(chuàng)建一個(gè)名為的文件，它將會(huì)是一個(gè)基于的網(wǎng)上書店應(yīng)用。這將初始化應(yīng)用程序，并告訴要在這一部分活躍。將為每個(gè)元素增加元素。控制器和視圖之間的粘合劑，而且會(huì)注入到?，F(xiàn)在我們添加書籍?dāng)?shù)組的對(duì)象到對(duì)象，這個(gè)對(duì)象對(duì)視圖是可見的。 編者注：我們發(fā)現(xiàn)了比較有趣的系列文章《30天學(xué)習(xí)30種新技術(shù)》，準(zhǔn)備翻譯，一天一篇更新，年終禮包。以下是第二天技術(shù)的譯文。 昨晚我完爆了一天一技術(shù)的任務(wù)...

    joyqi 評(píng)論0 收藏0

  • AngularJS簡述

    流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級(jí)JS框架，由谷歌團(tuán)隊(duì)開發(fā)維護(hù)，能夠快速構(gòu)建單頁web應(yīng)用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對(duì)代碼進(jìn)行封裝，調(diào)用封裝的方法，簡化操作 傳統(tǒng)方式是用get方式獲取元素，然后點(diǎn)方法 jQuery庫實(shí)現(xiàn)了對(duì)獲取方式的封裝，對(duì)方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會(huì)幫我們實(shí)現(xiàn)響應(yīng)的功能...

    Jason 評(píng)論0 收藏0

  • 理解和學(xué)習(xí)AngularJS（一）

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

    EastWoodYang 評(píng)論0 收藏0

  • 你的第一個(gè)AngularJS應(yīng)用

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

    shadajin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<