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...

17,391 Responses

  1. Lazrefo表示:

    Добрый день!
    Где заказать диплом специалиста?
    Купить диплом любого ВУЗа.
    woman.build2.ru/viewtopic.php?id=14546#p44637

  2. Fazrxsr表示:

    Добрый день!
    Мы изготавливаем дипломы любых профессий по приятным тарифам. Цена будет зависеть от выбранной специальности, года выпуска и образовательного учреждения.
    Где приобрести диплом по нужной специальности?
    Приобрести диплом ВУЗа
    arusak-diploms-srednee.ru/kupit-diplom-sssr  
    Успехов в учебе!

  3. Zazrcrt表示:

    Привет, друзья!
    Купить документ о получении высшего образования можно у нас. Мы оказываем услуги по продаже документов об окончании любых ВУЗов РФ. Вы получите диплом по любой специальности, любого года выпуска, включая документы образца СССР.
    true.pahom.su/2024/07/11/oformlenie-diploma-za-korotkiy-srok-bystro-i-nadezhno.html
    Удачи!

  4. Cazryvx表示:

    Привет, друзья!
    Мы можем предложить документы техникумов, расположенных на территории всей РФ. Вы можете заказать диплом от любого заведения, за любой год, включая сюда документы старого образца СССР. Дипломы и аттестаты выпускаются на “правильной” бумаге самого высокого качества. Это дает возможности делать настоящие дипломы, не отличимые от оригинала. Они будут заверены необходимыми печатями и подписями.
    Приобрести диплом любого ВУЗа.
    wutdawut.com/read-blog/2311
    Успешной учебы!

  5. Diplomi_ahPa表示:

    сколько стоит купить диплом среднего diplomasx.com .

  6. Diplomi_joei表示:

    купить бланки дипломов спо ast-diploms.com .

  7. Razrvtk表示:

    Здравствуйте!
    Мы предлагаем заказать диплом в высочайшем качестве, неотличимый от оригинала без участия специалиста высокой квалификации со сложным оборудованием.
    sabrina-online.su/wiki/index.php?title=diplomandoci
    Успешной учебы!

  8. Sazricp表示:

    Здравствуйте!
    Пошаговая инструкция по безопасной покупке диплома о высшем образовании
    uebkameri.listbb.ru/posting.php?mode=post&f=2&sid=5a702b544add604d13cc9c3a155aed20
    Окажем помощь!.

  9. Lueqoj表示:

    buy calan generic – verapamil generic buy tenoretic pill

  10. Qazrokc表示:

    Привет!
    Где заказать диплом специалиста?
    Наша компания предлагает выгодно и быстро заказать диплом, который выполнен на оригинальной бумаге и заверен мокрыми печатями, водяными знаками, подписями. Диплом способен пройти лубую проверку, даже при использовании специально предназначенного оборудования. Достигайте своих целей быстро с нашим сервисом.
    Купить диплом о высшем образовании.
    vintfint.com/blogs/22451/%D0%92%D1%8B%D0%B3%D0%BE%D0%B4%D0%BD%D1%8B%D0%B5-%D1%86%D0%B5%D0%BD%D1%8B-%D0%B8-%D0%B8%D0%B4%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-%D0%BA%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%BE-%D0%BF%D1%80%D0%B8%D0%BE%D0%B1%D1%80%D0%B5%D1%82%D0%B0%D0%B9-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC%D1%8B-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD

  11. Diplomi_lwKn表示:

    купить диплом о высшем образовании в твери купить диплом о высшем образовании в твери .

  12. Diplomi_jbet表示:

    купить диплом врача стоматолога diplomyx.com .

  13. Sazrwix表示:

    Привет, друзья!
    Легальная покупка школьного аттестата с упрощенной программой обучения
    grot.getbb.ru/posting.php?mode=post&f=6&sid=55d24fc8fafc5b4c89661eb7ae11aaa9
    Рады помочь!.

  14. Larioruad表示:

    Реально ли приобрести диплом стоматолога? Основные шаги
    asxdiplomik.com/kupit-diplom-nizhnij-novgorod

  15. Dnrtbil表示:

    Привет!
    Купить документ ВУЗа можно в нашей компании в Москве.
    diploms-x24.ru/kupit-diplom-sankt-peterburg
    Удачи!

  16. Fazrtny表示:

    Привет!
    Мы изготавливаем дипломы любых профессий по доступным тарифам. Стоимость может зависеть от конкретной специальности, года выпуска и университета.
    Где купить диплом по необходимой специальности?
    Заказать диплом университета
    landik-diploms-srednee.ru/attestat-shkoly  
    Удачи!

  17. Eddiehem表示:

    In the world of professional tennis, the name of Gustavo Kuerten https://roland-garros.gustavokuerten.com is closely linked to one of the most prestigious Grand Slam tournaments – Roland Garros.

  18. Qazrngq表示:

    Здравствуйте!
    Где заказать диплом по нужной специальности?
    Наша компания предлагает быстро и выгодно приобрести диплом, который выполнен на бланке ГОЗНАКа и заверен мокрыми печатями, водяными знаками, подписями. Документ пройдет любые проверки, даже с использованием профессиональных приборов. Решите свои задачи быстро и просто с нашей компанией.
    Приобрести диплом любого ВУЗа.
    payhip.com/BestNews/blog/news/detalnoe-opisanie-pokupki-dokumentov-v-magazine

  19. MichaelHycle表示:

    Ayrton Senna https://mclaren.ayrtonsenna-br.com is one of the greatest drivers in the history of Formula 1.

  20. Darrellspoop表示:

    Bieber’s https://baby.justinbieber-br.com path to global fame began with his breakthrough success Baby, which became his signature song and one of the most popular music videos of all time.

  21. Gilbertmax表示:

    Achraf Hakimi https://paris-saint-germain.ashrafhakimi.net is a young Moroccan footballer who quickly reached the football elite European in recent years.

  22. ErnestWeask表示:

    Kobe Bryant https://los-angeles-lakers.kobebryant-br.net one of the greatest basketball players of all the times, left an indelible mark on the history of sport.

  23. Cazruin表示:

    Привет, друзья!
    Мы готовы предложить документы ВУЗов, которые расположены на территории всей Российской Федерации. Вы сможете заказать качественно напечатанный диплом за любой год, в том числе документы старого образца СССР. Дипломы и аттестаты выпускаются на “правильной” бумаге самого высокого качества. Это дает возможности делать настоящие дипломы, не отличимые от оригинала. Документы будут заверены всеми обязательными печатями и штампами.
    Заказать диплом любого ВУЗа.
    hrv-club.ru/forums/index.php?autocom=gallery&req=si&img=6068
    Успешной учебы!

  24. Fazrjza表示:

    Добрый день!
    Мы изготавливаем дипломы любой профессии по доступным ценам. Стоимость будет зависеть от определенной специальности, года получения и образовательного учреждения.
    Где приобрести диплом специалиста?
    Приобрести диплом ВУЗа
    landik-diploms-srednee.ru/kupit-diplom-v-kazani  
    Успехов в учебе!

  25. Cazrtak表示:

    Привет!
    Мы предлагаем документы техникумов, расположенных в любом регионе Российской Федерации. Вы сможете приобрести качественный диплом от любого заведения, за любой год, в том числе документы СССР. Документы печатаются на “правильной” бумаге высшего качества. Это позволяет делать настоящие дипломы, которые невозможно отличить от оригиналов. Документы будут заверены необходимыми печатями и штампами.
    Приобрести диплом о высшем образовании.
    i2od836bz.blog5star.com/28636031/%D0%9A%D0%B0%D0%BA-%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE-%D0%BD%D0%B5%D0%B4%D0%BE%D1%80%D0%BE%D0%B3%D0%BE-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC-%D0%B2-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5
    Успешной учебы!

  26. Diplomi_hsPa表示:

    внести купленный диплом в реестр diplomasx.com .

  27. Diplomi_dbEa表示:

    купить диплом об высшем образовании купить диплом об высшем образовании .

  28. Lariortaq表示:

    Всё, что нужно знать о покупке аттестата о среднем образовании
    diplomyx24.ru/otzyvy

  29. Yrefwjf表示:

    Добрый день!
    Купить диплом ВУЗа.
    http://www.orderviewdocs.online/doku.php?id=??????_??????_?_??????_?????????????_????
    Удачи!

發佈留言

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