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,301 Responses

  1. Lariorkzs表示:

    Как официально купить диплом вуза с упрощенным обучением в Москве
    ast-diplom24.ru/kupit-diplom-sankt-peterburg

  2. Davidgor表示:

    Kylie Jenner https://kylie-cosmetics.kylie-jenner-ar.com is an American model, media personality, and businesswoman, born on August 10, 1997 in Los Angeles, California.

  3. Kevinunsed表示:

    Продажа новых автомобилей Hongqi
    https://hongqi-krasnoyarsk.ru/owners/road-assistance в Красноярске у официального дилера Хончи. Весь модельный ряд, все комплектации, выгодные цены, кредит, лизинг, трейд-ин

  4. Shaunelito表示:

    Upcoming fantasy MOBA https://bladesofthevoid.com evolved by Web3. Gacha perks, AI and crafting in one swirling solution!

  5. Tazrkzb表示:

    Добрый день!
    Купить диплом о высшем образовании
    Мы предлагаем документы ВУЗов, расположенных на территории всей России. Можно купить качественный диплом за любой год, указав актуальную специальность и оценки за все дисциплины. Документы делаются на бумаге самого высшего качества. Это позволяет делать настоящие дипломы, которые не отличить от оригинала. Они будут заверены всеми обязательными печатями и подписями.
    http://www.leenkup.com/read-blog/15756
    Поможем вам всегда!.

  6. Sazrjsd表示:

    Привет, друзья!
    Можно ли купить аттестат о среднем образовании, основные моменты и вопросы
    ic-info.ru/forum/user/166282
    Окажем помощь!.

  7. PeterFam表示:

    Казахский национальный технический университет https://satbayev.university им. К.Сатпаева

  8. Cazrntx表示:

    Добрый день!
    Мы готовы предложить документы техникумов, расположенных в любом регионе Российской Федерации. Вы имеете возможность заказать качественный диплом за любой год, включая документы старого образца. Дипломы и аттестаты печатаются на бумаге высшего качества. Это позволяет делать государственные дипломы, не отличимые от оригиналов. Они будут заверены всеми обязательными печатями и штампами.
    tirana.social/blogs/1030/%D0%9B%D0%B5%D0%B3%D0%BA%D0%BE-%D0%BF%D1%80%D0%B8%D0%BE%D0%B1%D1%80%D0%B5%D1%82%D0%B0%D0%B5%D0%BC-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B-%D0%B2-%D0%BB%D1%83%D1%87%D1%88%D0%B5%D0%BC-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5-Russian-Diplom

  9. Sazrjkd表示:

    Привет!
    Как избежать рисков при покупке диплома колледжа или ВУЗа в России
    reflections.listbb.ru/viewtopic.php?f=45&t=750
    Поможем вам всегда!.

  10. Cazrwph表示:

    Привет, друзья!
    Мы можем предложить документы ВУЗов, которые находятся в любом регионе РФ. Можно купить диплом от любого учебного заведения, за любой год, указав актуальную специальность и хорошие оценки за все дисциплины. Документы печатаются на бумаге высшего качества. Это позволяет делать настоящие дипломы, не отличимые от оригиналов. Они заверяются необходимыми печатями и штампами.
    forum.enchald.com/files/file/13-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B-%D0%B2-%D0%B8%D0%B7%D0%B2%D0%B5%D1%81%D1%82%D0%BD%D0%BE%D0%BC-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5-%D0%BF%D0%BE-%D0%B2%D1%8B%D0%B3%D0%BE%D0%B4%D0%BD%D0%BE%D0%B9-%D1%86%D0%B5%D0%BD%D0%B5/

  11. Dnrtxoo表示:

    Здравствуйте!
    Приобрести документ о получении высшего образования можно у нас в столице.
    diplomasx.com/kupit-diplom-rostov-na-donu
    Хорошей учебы!

  12. Xazrfue表示:

    Привет!
    Готовы предложить документы техникумов, которые находятся в любом регионе РФ. Вы можете купить диплом за любой год, указав необходимую специальность и хорошие оценки за все дисциплины. Дипломы и аттестаты делаются на “правильной” бумаге высшего качества. Это позволяет делать настоящие дипломы, которые невозможно отличить от оригинала. Они заверяются всеми необходимыми печатями и подписями.
    Мы предлагаем дипломы любой профессии по разумным ценам. Стоимость зависит от конкретной специальности, года выпуска и университета. Стараемся поддерживать для клиентов адекватную ценовую политику. Важно, чтобы документы были доступны для большого количества граждан.
    landik-diploms-srednee.ru/kupit-diplom-saratov В 
    Удачи!

  13. Diplomi_fmEa表示:

    Добрый день!
    Заказать документ о получении высшего образования вы сможете у нас в Москве.
    ast-diplomas24.ru/kupit-diplom-voronezh

  14. Dnrthyh表示:

    Добрый день!
    Заказать документ о получении высшего образования можно в нашей компании в столице.
    diploms-x.com/kupit-diplom-moskva
    Успехов в учебе!

  15. Xazrxba表示:

    Привет, друзья!
    Предлагаем документы техникумов, которые расположены в любом регионе РФ. Можно купить качественный диплом за любой год, указав актуальную специальность и оценки за все дисциплины. Документы выпускаются на “правильной” бумаге высшего качества. Это дает возможность делать настоящие дипломы, не отличимые от оригиналов. Документы заверяются необходимыми печатями и подписями.
    Мы готовы предложить дипломы любой профессии по выгодным ценам. Стоимость будет зависеть от выбранной специальности, года получения и образовательного учреждения. Стараемся поддерживать для покупателей адекватную политику цен. Для нас очень важно, чтобы дипломы были доступны для большого количества наших граждан.
    arusak-diploms-srednee.ru В 
    Удачи!

  16. Diplomi_fdEa表示:

    Привет, друзья!
    Приобрести документ института можно у нас в столице.
    diploms-x24.ru/kupit-diplom-vracha

  17. Diplomi_wxkl表示:

    купить диплом бухгалтера цена https://www.diploms-x.com .

  18. Diplomi_cakl表示:

    где можно купить диплом в спб asxdiplomik24.ru .

  19. AndreEmubs表示:

    Football in Saudi Arabia https://al-hilal.saud-abdulhamid-ar.com is gaining more and more popularity and recognition on the international stage, and Saud Abdul Hamid, the young and talented defender of Al Hilal, is a shining example of this success.

  20. WestonRor表示:

    Khvicha Kvaratskhelia https://napoli.khvicha-kvaratskhelia-ar.com is a name that in recent years has become a symbol of Georgian football talent and ambition.

  21. Phillipbrofs表示:

    Angel Di Maria https://benfica.angel-di-maria-ar.com is a name that will forever remain in the memories of Benfica fans.

  22. JohnnieBrupe表示:

    Roberto Firmino https://al-ahli.roberto-firmino-ar.com one of the most talented and famous Brazilian footballers of our time, has paved his way to success in different leagues and teams.

  23. Robertbeink表示:

    Maria Sharapova https://tennis.maria-sharapova-ar.com was born on April 19, 1987 in Nyagan, Russia. When Masha was 7 years old, her family moved to Florida, where she started playing tennis.

  24. Manralz表示:

    Добрый день!
    Где заказать диплом специалиста?
    Мы готовы предложить документы ВУЗов, расположенных в любом регионе Российской Федерации. Можно приобрести качественно напечатанный диплом за любой год, указав актуальную специальность и хорошие оценки за все дисциплины. Дипломы печатаются на “правильной” бумаге самого высокого качества. Это позволяет делать настоящие дипломы, не отличимые от оригиналов. Они будут заверены всеми требуемыми печатями и подписями.
    Мы можем предложить дипломы любой профессии по выгодным ценам.
    ast-diplom.com/kupit-diplom-rostov-na-donu
    Рады оказаться полезными!

  25. Cazrfwg表示:

    Привет, друзья!
    Мы можем предложить документы ВУЗов, которые находятся в любом регионе РФ. Вы сможете приобрести качественно сделанный диплом за любой год, включая сюда документы старого образца СССР. Дипломы и аттестаты делаются на бумаге высшего качества. Это позволяет делать настоящие дипломы, которые не отличить от оригинала. Они заверяются всеми обязательными печатями и подписями.
    rst.adk.audio/company/personal/user/259/forum/message/1936/1968/

  26. Uazrjlu表示:

    Здравствуйте!
    Где приобрести диплом специалиста?
    forumjustwoman.getbb.ru/posting.php?mode=post&f=43&sid=4bdf9488ca436ec64a32973f8ed234ff
    Успешной учебы!

  27. Qazrcfj表示:

    Привет!
    Пошаговая инструкция по официальной покупке диплома о высшем образовании.
    Приобрести диплом любого университета.
    h152pnu93.acidblog.net/59432761/%D0%9A%D0%B0%D0%BA-%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE-%D0%B1%D1%8B%D1%81%D1%82%D1%80%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%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5

  28. Uazrrhy表示:

    Привет, друзья!
    Где купить диплом по необходимой специальности?
    rpinnovative.1stbb.ru/viewtopic.php?f=8&t=373
    Успешной учебы!

  29. Xazrptp表示:

    Привет, друзья!
    Ьожем предложить документы ВУЗов, которые расположены на территории всей России. Вы можете приобрести качественный диплом за любой год, указав актуальную специальность и хорошие оценки за все дисциплины. Документы выпускаются на “правильной” бумаге самого высокого качества. Это позволяет делать настоящие дипломы, которые не отличить от оригиналов. Документы будут заверены необходимыми печатями и подписями.
    Мы можем предложить дипломы любой профессии по невысоким ценам. Стоимость может зависеть от выбранной специальности, года выпуска и образовательного учреждения. Стараемся поддерживать для клиентов адекватную политику тарифов. Для нас очень важно, чтобы дипломы были доступными для большого количества наших граждан.
    landik-diploms-srednee.ru/diplom-bakalavra В 
    Удачи!

  30. Diplomi_cnEa表示:

    Привет!
    Приобрести документ о получении высшего образования можно у нас.
    diplomyx24.ru/kupit-diplom-magistra

發佈留言

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