2. diel - AngularJS filtre & moduly

V úvode o AngularJS sme sa dozvedeli, ako je ľahké naprogramovať webovú aplikáciu v AngularJS. Dnes si povieme niečo o tom, ako filtrovať výstup v našej šablóne HTML a tiež ako vytvoriť taký vlastný filter.

V AngularJS môžeme filtrovať buďto repeatery (teda direktívu ngRepeat) alebo samotnej hodnoty a to nielen v šablóne, ale napríklad aj v Controlleru alebo vlastné direktíve. Základné použitie filtra v šablóne je nasledovné.

{{ hodnota | filtr:parametr1:parametr2 | dalsiFiltr:parametr1 }}

Takto môžeme zavolať filter v JavaScruiptu. Premenná $filter je servis odovzdaný treba Controlleru, direktíve alebo niečomu inému. Podobne ako u $scope túto hodnotu sami neposkytujeme. O to sa postará DI subsystém Angular.

$filter(jméno);

$filter vracia väčšinou funkciu, takže môžeme hneď filter zavolať napr. $filter(jméno)(parametr1, parametr2)

Filtrovanie repeaterov

Filtrovanie repeaterov sme si v rýchlosti ukázali v minulom tutorálu. Teraz si ho rozoberieme trochu podrobnejšie. Framework nám ponúka pár vstavaných filtrov. Sú nimi orderBy, filter a limitTo.

$ filter ( 'filter') (pole, výraz) - filter: výraz

Filter filer očakáva jediný parameter. Je ním hodnota podľa ktorej sa má výsledok filtrovať. Zobrazí sa potom len položky, ktoré zodpovedajú danému filtra. Majme potrebné polia užívateľ, v ktorom budú všetci užívatelia Devbooku. Ak by sme chceli urobiť označenie členov s automatickým dokončovaním, bolo by veľmi nepraktické pod Input zobraziť celý zoznam týchto používateľ. Práve tento zoznam odfiltruje textom, ktorý je v inputu, a tak ak návštevník zadá 'sd', zobrazí sa mu len užívatelia, ktorí majú vo svojom nicku výraz 'sd'.

Parametre

Pole - pole ktoré chceme filtrovať
Výraz - {textový reťazec | objekt | funkcie} - výraz podľa ktorého budeme poľa filtrovať
- textový řetězec: v poli zostanú len položky, ktoré obsahujú daný výraz. Všetky tieto položky budú vrátené samotným filter ako nové pole
- objekt: Objekt môžeme použiť, aby sme filtrovali len špecifické oblasti poľa. Ak pole obsahuje objekty s viacerými hodnotami (napr. Nick, web, telefón atp.), Môžeme repeater filtrovať len podľa niektorej z nich alebo podľa každej s inými hodnotami. Napr. výraz {nick: "sd", web: "devbook"} by sa viazal so všetkými užívateľmi v poli s nickom obsahujúcim 'sd' a webovou stránkou obsahujúci 'devbook'. Názov vlastnosti objektu (web, nick) môžeme nahradiť znakom $ (dolár), ktorý sa spája so všetkými vlastnosťami objektu. Výraz {$: "sd"} má rovnaký efekt, ako vyššie uvedený príklad (teda len 'sd').
- funkce: ak repeateru odovzdáme funkciu, bude zavolaná pre každý element s určitými parametrami. Filter v tomto prípade vráti všetky prvky, u ktorých funkcia vrátila logickú hodnotu true

Príklad

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf8" />
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        <div ng-init="uzivatele = [{jmeno:'John', prijmeni:'Doe', email:'[email protected]'},
                                    {jmeno:'Jane', prijmeni:'Doe', email:'[email protected]'},
                                    {jmeno:'Joe', prijmeni:'Blow', email:'[email protected]'},
                                    {jmeno:'Chan', prijmeni:'Siu Ming', email:'[email protected]'}]"></div>

        Hledání: <input ng-model="searchText" />
        <table>
            <tr> <th>Jméno</th><th>Příjmení</th><th>E-mail</th> <tr>
            <tr ng-repeat="uzivatel in uzivatele | filter:searchText">
                <td>{{uzivatel.jmeno}}</td>
                <td>{{uzivatel.prijmeni}}</td>
                <td>{{uzivatel.email}}</td>
            <tr>
        </table><hr />

        Vše: <input ng-model="search.$" /> <br />
        Jen jméno <input ng-model="search.jmeno" /><br />
        Jen příjmení <input ng-model="search.prijmeni" /><br />
        Jen e-mail <input ng-model="search.email" /><br />
        <table>
            <tr> <th>Jméno</th><th>Příjmení</th><th>E-mail</th> <tr>
            <tr ng-repeat="uzivatel in uzivatele | filter:search">
                <td>{{uzivatel.jmeno}}</td>
                <td>{{uzivatel.pijmeni}}</td>
                <td>{{uzivatel.email}}</td>
            <tr>
        </table>
    </body>
</html>

Podobný príklad nájdete aj v oficiálnej API dokumentácii AngularJS

$ filter ( 'orderby') (pole, výraz [, prevrátiť]) - orderby: výraz [: prevrátiť]

Názov tohto filtra hovorí za všetko. Tento filter poľa zoradí podľa zadaných hodnôt. Tie sú dve. Jednak výraz, podľa ktorého chceme pole zoradiť a potom či chceme poľa zoradiť vzostupne alebo zostupne.

Parametre

Pole - pole ktoré chceme zoradiť
Výraz - {funkcie | textový reťazec | polia funkcií, textových reťazcov} - výraz podľa ktorého budeme poľa radiť
- funkce: Zavolá sa pre každý prvok poľa. Výsledok sa bude radiť podľa výstupu operátory <(menší ako), = (presne),> (väčší ako)
- textový řetězec: AngularJS váraz, ktorý sa zhoduje s názvami vlastností objektu v poli (napr. Nick, web, telefón). Možno použiť prefix + alebo - ak chcete pole zoradiť vzostupne (+) alebo zostupne (-)
- pole: Pole funkcií alebo textových reťazcov. Prvý z hodnôt je použitá vždy. Ak sú v poli dve rovnaké hodnoty, je použitá ďalšia položka tohto poľa k zoradenie.
Prevrátiť - {logická hodnota} - prevráti výsledok

Príklad

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf8" />
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        <div ng-init="uzivatele = [{jmeno:'John', prijmeni:'Doe', email:'[email protected]'},
                                    {jmeno:'Jane', prijmeni:'Doe', email:'[email protected]'},
                                    {jmeno:'Joe', prijmeni:'Blow', email:'[email protected]'},
                                    {jmeno:'Chan', prijmeni:'Siu Ming', email:'[email protected]'}]">
            <pre>Řadit podle = {{predicate}}; převrátit = {{reverse}}</pre>
            <hr/>
            [ <a href="" ng-click="predicate=''">neseřazeno</a> ]
            <table>
                <tr>
                    <th><a href="" ng-click="predicate = 'jmeno'; reverse=false">Jméno</a>
                        (<a href ng-click="predicate = '-jmeno'; reverse=false">^</a>)</th>
                    <th><a href="" ng-click="predicate = 'prijmeno'; reverse=!reverse">Příjmení</a></th>
                    <th><a href="" ng-click="predicate = 'email'; reverse=!reverse">E-mail</a></th>
                <tr>
                <tr ng-repeat="uzivatel in uzivatele | orderBy:predicate:reverse">
                    <td>{{uzivatel.jmeno}}</td>
                    <td>{{uzivatel.prijmeni}}</td>
                    <td>{{uzivatel.email}}</td>
                <tr>
            </table>
        </div>
    </body>
</html>

$ filter ( 'limitTo') (pole, výraz) - limitTo: výraz

Filter limitTo obmedzí repeater len na daný počet výpisov od začiatku poľa. Vo výraze môže byť číslo. Ak uvedieme záporné číslo, budú sa brať položky od konca daného poľa.

Príklad

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf8" />
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        <div ng-init="uzivatele = [1,2,3,4,5,6,7,8,9,10]; limit = 3;">
            Limit {{uzivatele}}: <input type="text" ng-model="limit" /><br />
            Výstup: {{uzivatele | limitTo:limit }}
        </div>
    </body>
</html>

Filtrovanie hodnôt

Ďalej môžete filtrovať hodnoty. V AngularJS je pár vstavaných filtrov uvedených v zozname pod týmto odsekom. Filtre možno volať v JS zo servisu $filter alebo v šablóne klasickým zápisom filtrov. Všeobecný zápis oboch týchto spôsobov je uvedený vyššie.

currency: Formátuje číslo ako menu a vloží pred neho symbol, ktorý očakáva v parametri. Formátovaní čísla by teda mohlo vyzerať nasledovne:

{{ 1235 | currency['$'] }}

Výsledok: $ 1,235.00

date: Formátuje timestamp alebo dátum na zadaný formát dátumu a času. Ako jediný parameter očakáva formát, do ktorého má timestamp sformátovať. Prehľad nájdete na adrese http://docs.angularjs.org/....filter:date Príklad použitia filtra date:

{{ 1288323623006 | 'dd.M.yyyy H:m:s' }}

Výsledok: 29.10.2010 05:40:23

json: Formátuje javascriptový objekt ako reťazec textu JSON. Príklad:

{{ { nick: "someone" } | json }}

výsledok:

{
   "nick": "someone"
}

Lowercase, uppercase: Prvý prevedie text na malé znaky, druhý na veľké.

{{ "DEVBOOK" | lowercase }}
{{ "devbook" | uppercase }}

Výsledok: devbook DEVBOOK

number: Formátuje číslo. Ako parameter očakáva číslo (počet desatinných miest, ktorá má zobraziť)

{{ 1234.56789 | number:2 }}

Výsledok: 1,234.56

Tak to boli všetky základné preddefinované filtre v AngularJS. Niekedy sa môže stať, že potrebujeme výstup (repeater alebo hodnotu) filtrovať inak. V takejto prípade nám AngularJS ponúka vytvoriť filter vlastné. Jeden taký filter, ktorý býva často potrebné, je filter na skracovanie textu. Pokiaľ ale chceme definovať vlastné filtre, musíme si najprv povedať niečo o moduloch.

Moduly

Moduly združujú filtre, direktívy a kontrolery, ktoré patria k sebe. Dajú sa chápať ako také namespace pre aplikáciu. Moduly vytvára angular.module(jméno, vyžadované, konfigurační_fce). V parametroch je meno modulu, čo je textový reťazec, pole požadovaných modulov (ich mien - textových reťazcov), ktoré patria do tohto modulu a ktoré budeme v aplikácii používať. Posledný parameter je konfiguračný funkcie, o ktorej si povieme viac v inom diele seriálu. V parametroch je nepovinná.

Takže ako to súvisí s filtrami? Je to prosté, filter musí patriť do nejakého modulu, preto ho najprv musíme vytvoriť. V externom JS súboru si teda vytvoríme hlavný modul našej aplikácie, ktorý nazveme treba testApp. Meno hlavného modulu nesmieme zabudnúť uviesť v direktíve ngApp. Samotný modul ale ponecháme prázdny. V druhom parametri mu poze odovzdáme meno nášho druhého modulu testApp.filtry, kam vložíme náš filter. Samotný filter potom vytvorí module.filter, ktorý má dva parametre, meno filtra a továreň, ktorá musí vrátiť modifikačné funkciu. Kód samotného filtra je potom veľmi krátky a veľmi užitočný, ako je zvykom v AngularJS. Filter a zápis modulov by mohol vyzerať napríklad takto:

// Hlavní modul aplikace
angular.module('testApp', ['testApp.filtry']);

// Modul pro filtry
angular.module('testApp.filtry', [])
    .filter('truncate', function() {
        return function(text, delka, znaky) {

            // Pokud nedostaneme textový řetězec, nebudeme dělat nic
            if (!angular.isString(text)) return;

            // Vstupní parametry
            if (!angular.isNumber(delka))
                delka = 15;
            if (!angular.isString(znaky))
                znaky = "...";

            // Pokud je délka textu menší než délka v parametru, neprovedeme žádnou změnu
            if (text.length <= delka)
                return text;
            // Jinak text zkrátíme a přidáme za něj dané znaky
            return text.substring(0, delka) + znaky;
        };
    });

Všimnite si tiež, že AngularJS obsahuje funkcie na kontrolu typov. Môžete samozrejme použiť operátor typeof, však spôsob ANGULAR je čitateľnejší a nemusíte už nič vymýšľať. Nakoniec nezabudnite pridať do ngApp meno hlavného modulu testApp a potom už môžete používať filter truncate.

<!DOCTYPE html>
<html ng-app="testApp">
    <head>
        <meta charset="utf8" />
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
        <script src="js/scripts.js"></script>
    </head>
    <body>
        <section>
            Textový řetězec: <input type="text" ng-model="text" /><br />
            <h4>Výstup po 25 znaků:</h4>
            <p>{{text|truncate:25}}</p>
            <h4>Výstup po 10 znaků:</h4>
            <p>{{text|truncate:10}}</p>
            <h4>Výstup po 5 znaků s ukončením ' =>':</h4>
            <p>{{text|truncate:5:' =>'}}</p>
        </section>
    </body>
</html>

Nabudúce si povieme niečo o direktívach a ako takú vlastnú direktívu vytvoriť.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 543x (991 B)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Drahomír Hanák

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Aktivity