馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

AngularJS – Directive & Filter 介紹篇

by · 2015-02-10

為了方便文章閱讀，本篇將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清單。

Tags:

You may also like...

17,750 Responses

  1. Roberthep表示:
    2024-05-2303:16:15

    farmacie online sicure farmacia online piГ№ conveniente п»їFarmacia online migliore

    回覆
  2. WilliamTeath表示:
    2024-05-2302:35:25

    europa apotheke: online apotheke – gГјnstige online apotheke

    回覆
  3. WilliamTeath表示:
    2024-05-2302:35:04

    pharmacie en ligne france livraison belgique: acheter mГ©dicament en ligne sans ordonnance – vente de mГ©dicament en ligne

    回覆
  4. Roberthep表示:
    2024-05-2302:16:10

    apotheke online online apotheke preisvergleich internet apotheke

    回覆
  5. Roberthep表示:
    2024-05-2302:02:24

    gГјnstigste online apotheke medikament ohne rezept notfall internet apotheke

    回覆
  6. Roberthep表示:
    2024-05-2301:44:30

    Farmacie online sicure migliori farmacie online 2024 farmacie online affidabili

    回覆
  7. Roberthep表示:
    2024-05-2301:06:41

    farmacie online sicure farmacia online farmaci senza ricetta elenco

    回覆
  8. tablet表示:
    2024-05-2301:02:58

    buy vermox online uk

    回覆
  9. AntoniaSut表示:
    2024-05-2301:01:03

    pharmacie en ligne sans ordonnance: pharmacie en ligne fiable – pharmacie en ligne

    回覆
  10. sale表示:
    2024-05-2300:31:44

    cheapest doxycycline uk

    回覆
  11. Donaldcoums表示:
    2024-05-2300:31:10

    internet apotheke: online apotheke – online apotheke rezept

    回覆
  12. Hkmghf表示:
    2024-05-2222:36:23

    pills for treat prostatitis complex – prostatitis medications pleasure prostatitis treatment upset

    回覆
  13. AntoniaSut表示:
    2024-05-2222:21:29

    Farmacia online più conveniente: acquisto farmaci con ricetta – top farmacia online

    回覆
  14. VernonRib表示:
    2024-05-2222:19:25

    https://eufarmaciaonline.com/# farmacia online 24 horas

    回覆
  15. WilliamTeath表示:
    2024-05-2222:01:28

    Achat mГ©dicament en ligne fiable: pharmacie en ligne pas cher – pharmacie en ligne pas cher

    回覆
  16. RalphSnize表示:
    2024-05-2221:30:55

    acquisto farmaci con ricetta: farmacia online – acquisto farmaci con ricetta

    回覆
  17. tablets表示:
    2024-05-2221:21:26

    accutane 30 mg cost

    回覆
  18. WilliamTeath表示:
    2024-05-2221:16:30

    comprare farmaci online con ricetta: Farmacia online miglior prezzo – farmacie online autorizzate elenco

    回覆
  19. AntoniaSut表示:
    2024-05-2221:11:10

    farmacia online barata y fiable: farmacia online españa envío internacional – farmacia online españa envío internacional

    回覆
  20. medication表示:
    2024-05-2220:43:49

    synthroid 188 mcg

    回覆
  21. AntoniaSut表示:
    2024-05-2220:16:41

    online apotheke rezept: internet apotheke – eu apotheke ohne rezept

    回覆
  22. sale表示:
    2024-05-2219:19:54

    online pharmacy cipro

    回覆
  23. online表示:
    2024-05-2219:03:08

    synthroid 25 mcg tablet

    回覆
  24. order azithromycin online uk表示:
    2024-05-2218:08:59

    zithromax capsules 500mg

    回覆
  25. RalphSnize表示:
    2024-05-2217:59:18

    Farmacia online piГ№ conveniente: farmacia online senza ricetta – comprare farmaci online con ricetta

    回覆
  26. Roberthep表示:
    2024-05-2217:19:39

    online apotheke gГјnstig online apotheke deutschland online apotheke deutschland

    回覆
  27. WilliamTeath表示:
    2024-05-2217:15:43

    farmacia online madrid: farmacia online madrid – farmacias online seguras en espaГ±a

    回覆
  28. WilliamTeath表示:
    2024-05-2217:15:24

    п»їFarmacia online migliore: farmacie online sicure – farmacia online

    回覆
  29. Donaldcoums表示:
    2024-05-2216:32:47

    farmacia online barcelona: farmacia en casa online descuento – farmacia online madrid

    回覆
  30. Roberthep表示:
    2024-05-2216:21:54

    ohne rezept apotheke gГјnstige online apotheke gГјnstigste online apotheke

    回覆

發佈留言

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