AngularJS – Directive & Filter 介紹篇

為了方便文章閱讀,本篇將filter翻譯成過濾器、directive翻譯成指示指令

在看過前幾篇的AngularJS的教學後,我們對AngularJS的開發應該有了基本的認識,針對HTML文件中我們的操作有:

針對頁面引入應用程式模組

<html ng-app="store">

針對頁面引入控制器

<body ng-controller="StoreController as store">

針對頁面去顯示或隱藏元素

<h1 ng-show="name">Hello, {{ name }} !</h1>

針對大量的資料設定重複的區域

<li ng-repeat="product in store.products">{{ product.name }}</li>
AngularJS Part4 Slide1

接下來針對過濾器來介紹,依下圖所示產品價格的部分,有的是有小數點有的沒有,會造成頁面在資料呈現上的參差不齊。

AngularJS Part4 Slide2

若我們在該表達式(expression)加上一條直線(pipe),在直線後面可以加入一些過濾器,本範例加入的是貨幣格式的過濾器,當加入後價格在頁面上顯示的格式,就會自動加上了$符號和兩位數的小數點。

AngularJS Part4 Slide3

我們也可以在過濾器後面利用冒號再加上一些選項,讓呈現的資料更不同,例如下圖中date格式中是以「月/日/年 @ 時:分AM」這樣的方式顯示,而除了貨幣currency、日期date的過濾器之外,還包含有大小寫轉換的uppercase、lowercase、字數也可以當成資料呈現筆數的limitTo、另外還有可以針對重複性的資料進行排序的orderBy,大概的使用方式可以參考下圖,或是在JS Bin看看馬老師製作的案例。

AngularJS Part4 Slide4

另外關於指示指令部分,在這次的案例上我們加上產品的圖片,圖片的部分有兩種,一個是大圖;另一個是產品的縮圖,也因為有兩種不同的資料,要注意他被加在數列裡面的方式。

AngularJS Part4 Slide5

在頁面上顯示圖片的方式要注意不是用src的屬性去呈現,而是需要用ng-src這個屬性,加上圖片欄位的表達式即可,在JS Bin上面觀賞本案例程式碼。

AngularJS Part4 Slide6

※以上截圖部分為AngularJS官方教學視訊,另有filter指令介紹的專頁和所有filter清單

You may also like...

14,724 Responses

  1. Sazriuk表示:

    Привет!
    Диплом любой специальности
    telegra.ph/kupit-vkladysh-v-diplom-08-22

  2. Cazrmlx表示:

    Привет, друзья!
    Купить диплом института
    telegra.ph/kupit-diplom-o-vysshem-obrazovanii-v-moskve-08-13-7

  3. Cazrkeb表示:

    Привет!
    Приобрести диплом университета
    telegra.ph/kupit-diplom-o-vysshem-obrazovanii-s-zaneseniem-v-reestr-08-13-8

  4. Sazrado表示:

    Привет, друзья!
    Диплом по специальности на выбор
    telegra.ph/diplom-kupit-goznak-08-13-4

  5. Dnrtwln表示:

    Привет!
    Купить документ о получении высшего образования можно в нашей компании в Москве.
    astraclub.ru/members/343410-hnfmrfdtg?vmid=44400#vmessage44400

  6. Diplomi_icEa表示:

    Привет!
    Купить документ о получении высшего образования можно у нас в Москве.
    odyclub.ru/index.php?/topic/4522-информация-t400f

  7. Mazrnps表示:

    Привет, друзья!
    Реально ли приобрести диплом стоматолога? Основные этапы
    hvoinie.ru/xvojnye-derevya-nazvaniya

  8. Lazrtqh表示:

    Добрый день!
    Заказать диплом о высшем образовании.
    teh-diplom.ru

  9. Lazramf表示:

    Добрый день!
    Заказать диплом о высшем образовании.
    nsk-diplom.com/kak-i-gde-kupit-diplom-vuza

  10. Jamesric表示:

    tamoxifen headache: Purchase Nolvadex Online – where to get nolvadex

  11. DanielTet表示:

    buy cytotec pills online cheap https://cytotec.pro/# buy cytotec online fast delivery
    lasix generic

  12. Treflgx表示:

    Привет!
    Покупка диплома о среднем полном образовании: как избежать мошенничества?
    booknazy.blogspot.com/2012/05/blog-post_10
    Окажем помощь!.

  13. Jamesric表示:

    lasix uses: cheap lasix – lasix furosemide 40 mg

  14. Cazrawg表示:

    Привет!
    Заказать диплом о высшем образовании
    polkasocial.org/read-blog/27296?mode=night

  15. Mazrdjs表示:

    Здравствуйте!
    Процесс получения диплома стоматолога: реально ли это сделать быстро?
    visualchemy.gallery/forum/viewtopic.php?pid=3414570#p3414570

  16. Mazrcwa表示:

    Привет!
    Всё, что нужно знать о покупке аттестата о среднем образовании без рисков
    ssti.ru/archive/394-elektronno-bibliotechnaya-sistema-iqlib

  17. Jamesric表示:

    buy cytotec online fast delivery: Misoprostol price in pharmacy – cytotec pills buy online

  18. Lazrvmy表示:

    Привет, друзья!
    Приобрести диплом университета.
    diplom-zakaz.ru/kak-kupit-attestat-v-moskve

  19. Mazrsqi表示:

    Добрый день!
    Парадокс, но купить диплом кандидата наук оказалось не так и сложно
    videopro.ru/xenforo/index.php?members/tamarawweicy.1384

  20. Lazryms表示:

    [u][b] Привет![/b][/u]
    [b]Мы предлагаем дипломы[/b] любой профессии по невысоким тарифам.
    [url=http://ege09.ru/2018/03/09/]ege09.ru/2018/03/09[/url]

  21. Diplomi_htEa表示:

    Привет!
    Заказать документ университета вы имеете возможность у нас в столице.
    [url=http://hattiesburgms.com/area/attachment/hattiesburg-downtown-aerial-1/#comment-1474380/]hattiesburgms.com/area/attachment/hattiesburg-downtown-aerial-1/#comment-1474380[/url]

  22. Mazrqbl表示:

    Привет, друзья!
    Как не стать жертвой мошенников при покупке диплома о среднем полном образовании
    bodybuilding.net/members/sonnick84-page4

  23. Cazrspg表示:

    Привет, друзья!
    Мы готовы предложить документы техникумов
    pytalovo.4admins.ru/viewtopic.php?f=15&t=2337

  24. Dnrtmbv表示:

    Привет, друзья!
    Приобрести документ института можно у нас.
    ok-vmeste.ru/toget/1459-zhelaete-zakazat-podlinnyi-diplom

  25. Diplomi_srEa表示:

    Привет, друзья!
    Купить документ университета можно в нашей компании в столице.
    msfo-soft.ru/msfo/forum/messages/forum31/topic10493/message300890/?result=new#message300890

  26. ElliotRep表示:

    Джип туры по Крыму https://м-драйв.рф/tours/vyshe-oblakov/ уникальные маршруты и яркие эмоции. Погрузитесь в увлекательнее приключение вместе с нами. Горные, лесные, подземные экскурсии, джиппинг в Крыму с максимальным комфортом.

  27. Trefhpa表示:

    Здравствуйте!
    Всё о покупке аттестата о среднем образовании: полезные советы
    buhtarma.ru/users/ymetal
    Окажем помощь!.

  28. Cazrjfi表示:

    Привет, друзья!
    Приобрести диплом ВУЗа
    polkasocial.org/read-blog/27296_sekrety-uspeshnoj-pokupki-shkolnogo-attestata-poshagovaya-instrukciya

  29. DanielTet表示:

    cytotec abortion pill http://lisinopril.guru/# no prescription lisinopril
    furosemida 40 mg

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。