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

  1. Diplomi_vamn表示:

    купить диплом в кирове ast-diplomas.com .

  2. Diplomi_npKn表示:

    купить диплом улгу asxdiplomik.com .

  3. Tarioribc表示:

    Здравствуйте!
    Где заказать диплом по актуальной специальности?
    Приобрести диплом о высшем образовании.
    http://offtop.ru/devchonki/v4_2917040_1.php
    Поможем вам всегда!

  4. Haycrire表示:

    Привет, друзья!
    Для некоторых людей, заказать диплом о высшем образовании – это необходимость, шанс получить достойную работу. Однако для кого-то – это очевидное желание не терять время на учебу в ВУЗе. С какой бы целью вам это не понадобилось, наша компания готова помочь. Быстро, качественно и по доступной цене сделаем диплом любого года выпуска на настоящих бланках с реальными подписями и печатями.
    Наша компания предлагает выгодно и быстро заказать диплом, который выполняется на оригинальном бланке и заверен мокрыми печатями, штампами, подписями официальных лиц. Документ способен пройти лубую проверку, даже с использованием специально предназначенного оборудования. Достигайте своих целей быстро с нашими дипломами.
    Где приобрести диплом по необходимой специальности?
    https://njt.ru/forum/user/184033/
    Успешной учебы!

  5. WilliamDeeli表示:

    Привет!
    Приобрести документ о получении высшего образования вы имеете возможность в нашем сервисе. Мы предлагаем документы об окончании любых ВУЗов Российской Федерации. Вы сможете получить диплом по любой специальности, включая документы образца СССР. Гарантируем, что при проверке документа работодателями, каких-либо подозрений не появится.
    Наши специалисты предлагают выгодно и быстро заказать диплом, который выполнен на бланке ГОЗНАКа и заверен мокрыми печатями, штампами, подписями официальных лиц. Данный диплом пройдет любые проверки, даже с использованием профессиональных приборов. Решайте свои задачи быстро с нашими дипломами.
    Где приобрести диплом специалиста?
    https://injectorcar.ru/forum/showthread.php?p=230396#post230396
    Хорошей учебы!

  6. Fab表示:

    Progressive slots are popular because the jackpots keep growing – until it’s won! A tiny percentage of each bet goes towards the game’s jackpot prize, so you’ll see those jackpot numbers steadily rising until someone gets lucky and grabs it for themselves. The last position on this list is occupied by arguably the most beautiful slot in Play’n GO’s catalogue. Wild Blood 2 represents the continuation of the original 2013 slot of the same title. Drawing inspiration – and blood – from the vampire myth and the Goth subculture, the one-armed bandit plays with your mind a little. At one point, you sure won’t know what’s real and what is fantasy. 18 Apr 2024 This table serves as your quick-reference guide to discern the top Play n Go casino sites. By evaluating each casino against these criteria, you can confidently choose a platform that offers the best gaming environment, tailored to Play n Go games. Whether it’s the thrill of spinning the best Play n Go slots or the anticipation of the live dealer tables, make sure your chosen casino checks all the right boxes for an optimal gaming journey.
    https://page-wiki.win/index.php?title=Double_diamond_fruit_machines
    They only provide Texas Hold’em and Omaha, the two most popular poker varieties. The platform is safe and neutral for everybody playing, whether they are accomplished gamers or total novices. You can check their blog for more information if you have any doubts about the website. It is one of the best online poker sites in India that allows you to play poker online in India with fake money. After examining everything that the best offshore poker sites we have reviewed have to offer, it is clear that CoinPoker is the top option whether you are a recreational player or an experienced US poker player. You can participate in exciting tournaments as well as cash games where you have the potential to win large amounts of cash. As a returning player, you’ll get access to a number of rewarding promotions as well as a special poker welcome bonus for new gamers.

  7. Haycrire表示:

    Привет!
    Для многих людей, купить диплом ВУЗа – это острая потребность, удачный шанс получить достойную работу. Но для кого-то – это желание не терять время на учебу в институте. Что бы ни толкнуло вас на это решение, наша компания готова помочь. Оперативно, профессионально и по доступной цене сделаем диплом любого ВУЗа и любого года выпуска на подлинных бланках с реальными подписями и печатями.
    Наши специалисты предлагают выгодно и быстро приобрести диплом, который выполнен на оригинальном бланке и заверен мокрыми печатями, водяными знаками, подписями. Документ способен пройти любые проверки, даже с использованием специального оборудования. Решите свои задачи быстро и просто с нашим сервисом.
    Где приобрести диплом по нужной специальности?
    http://rosen.moibb.ru/viewtopic.php?f=2&t=373
    Успехов в учебе!

  8. Uazrkks表示:

    Добрый день!
    Купить диплом любого ВУЗа
    Наши специалисты предлагают выгодно и быстро заказать диплом, который выполнен на оригинальной бумаге и заверен мокрыми печатями, водяными знаками, подписями. Данный диплом пройдет лубую проверку, даже с использованием специально предназначенного оборудования. Решите свои задачи быстро с нашим сервисом.
    Где заказать диплом по необходимой специальности?
    http://www.hristianka.ru/forum/r/prev_loaded/1/
    Рады оказать помощь!.

  9. Fab表示:

    Caesars Slots Playtika Rewards is the ultimate loyalty program that continuously rewards you for playing! Playtika Rewards is free to join, and your membership is automatic!  Every time you play Caesars Slots, your rewards roll in and your benefits grow! As you advance through different membership statuses, you will enjoy exclusive access to our VIP experience. You will also qualify to collect even more free gifts and enjoy greater coin rewards! We’re also seeing a good amount of genre diversity, including strategy (Monopoly Go!), puzzle (Candy Crush Saga, Tetris), action (Roblox), and simulation (Township). Note: genres are hard to identify these days, as many games have many different elements of gameplay that bear little relationship to what category they’re actually published in.
    http://www.harrika.fi/wiki/index.php?title=Tribal_gaming_news
    Looking for entertainment? Check out the hottest LIVE entertainment at 32 Brews Street! Looking at the merits of the case, the Supreme Court ruled the lower court “abused its discretion” by ruling that the skill-game industry is likely to succeed in its claims that its games are a protected form of free speech. The High Limit Slots room offers an array of favorite titles and the newest Slots in the industry. The floor layout and contemporary design create a relaxed and stimulating atmosphere where guests enjoy hours of play in a private setting. Slot denominations range from one cent to $5 on the general gaming floor, while the High Limit Slots room offers $1 to $1,000 bets. A Non-Smoking Slots room is conveniently located near the Winners Way Garage. Inside, guests will find an impressive selection of the most popular slot titles in a variety of denominations. Guests can also enjoy a Non-Smoking High Limit Slots area.

  10. ThomasAleve表示:

    Discover Casper Ruud’s https://tennis.casper-ruud-fr.com journey from his Challenger debut to the top 10 of the world tennis rankings. A unique success.

  11. CarlosShapy表示:

    The fascinating story of Alexander Zverev’s https://tennis.alexander-zverev-fr.biz rapid rise from a junior star to one of the leaders of modern tennis.

  12. DennyPax表示:

    The fascinating story of Daniil Medvedev’s https://tennis.daniil-medvedev-fr.biz rise to world number one. Find out how a Russian tennis player quickly broke into the elite and conquered the tennis Olympus.

  13. RandyHak表示:

    Carlos Alcaraz https://tennis.carlos-alcaraz-fr.biz from a talented junior to the ATP top 10. His rise is the result of hard work, support and impressive victories at major world tournaments.

  14. Haroldfug表示:

    Jannik Sinner https://tennis.jannik-sinner-fr.biz an Italian tennis player, went from starting his career to entering the top 10 of the ATP, demonstrating unique abilities and ambitions in world tennis.

  15. Lunrmeg表示:

    Привет!
    Мы можем предложить дипломы любой профессии по выгодным ценам.
    Мы готовы предложить документы техникумов, расположенных в любом регионе Российской Федерации. Можно заказать диплом от любого учебного заведения, за любой год, указав необходимую специальность и оценки за все дисциплины. Документы выпускаются на “правильной” бумаге высшего качества. Это позволяет делать настоящие дипломы, не отличимые от оригиналов. Документы заверяются всеми необходимыми печатями и штампами.
    Гарантируем, что в случае проверки документов работодателями, каких-либо подозрений не возникнет.
    Где купить диплом специалиста?
    profbuh.forumkz.ru/viewtopic.php?id=5155#p9224

  16. Briantes表示:

    Добрый день!
    Заказать диплом о высшем образовании.
    Мы предлагаем купить диплом отличного качества, который не отличить от оригинала без использования специального оборудования и квалифицированного специалиста.
    Где заказать диплом по актуальной специальности?
    http://www.pets-ural.ru/content/forum/viewtopic.php?p=63537#63537
    Успешной учебы!

  17. Diplomi_rrmn表示:

    купить школьный аттестат ast-diplomas.com .

  18. Tariorbhi表示:

    Добрый день!
    Где заказать диплом по нужной специальности?
    Купить диплом о высшем образовании.
    https://blog.libero.it/wp/interesting/2024/02/22/поступление-в-университет-как-делать/
    Окажем помощь!

  19. Lunrsnr表示:

    Здравствуйте!
    Мы предлагаем дипломы любой профессии по доступным тарифам.
    Мы предлагаем документы техникумов, которые расположены в любом регионе РФ. Можно купить диплом от любого заведения, за любой год, включая документы старого образца. Документы делаются на бумаге самого высокого качества. Это позволяет делать настоящие дипломы, которые не отличить от оригиналов. Они будут заверены всеми необходимыми печатями и подписями.
    Даем гарантию, что при проверке документов работодателями, каких-либо подозрений не появится.
    Где приобрести диплом по актуальной специальности?
    psngames.rusff.me/viewtopic.php?id=331#p1594

  20. Uazricg表示:

    Привет!
    Купить диплом университета
    Мы предлагаем выгодно и быстро заказать диплом, который выполнен на оригинальной бумаге и заверен печатями, штампами, подписями официальных лиц. Диплом способен пройти любые проверки, даже при помощи специального оборудования. Решите свои задачи быстро и просто с нашей компанией.
    Где приобрести диплом по необходимой специальности?
    http://netcs.ru/forum/member.php?u=4834
    Всегда вам поможем!.

  21. Briantes表示:

    [u][b] Привет![/b][/u]
    Заказать диплом университета.
    Наша компания предлагает приобрести диплом в высоком качестве, который не отличить от оригинального документа без участия специалистов высокой квалификации со специальным оборудованием.
    [b]Где заказать диплом специалиста?[/b]
    http://www.mirmafii.ru/article/7427
    [b]Успешной учебы![/b]

  22. Diplomi_jkmn表示:

    купить диплом государственного образца [url=https://ast-diplomas.com/]купить диплом государственного образца[/url] .

  23. Diplomi_lpkl表示:

    купить диплом медработника [url=https://diploms-x.com/]https://diploms-x.com/[/url] .

  24. Briantes表示:

    Добрый день!
    Купить диплом о высшем образовании.
    Наша компания предлагает приобрести диплом в высоком качестве, неотличимый от оригинала без использования дорогостоящего оборудования и квалифицированного специалиста.
    Где приобрести диплом по необходимой специальности?
    https://vipka.0bb.ru/viewtopic.php?id=5645#p8486
    Успешной учебы!

  25. Uazrlyl表示:

    Привет!
    Заказать диплом о высшем образовании
    Наши специалисты предлагают выгодно и быстро заказать диплом, который выполнен на оригинальном бланке и заверен печатями, водяными знаками, подписями официальных лиц. Данный диплом способен пройти любые проверки, даже при использовании специфических приборов. Достигайте своих целей максимально быстро с нашей компанией.
    Где купить диплом по нужной специальности?
    https://www.tdp74.ru/forum/user/5414/
    Рады оказать помощь!.

  26. Tariorvst表示:

    Добрый день!
    Где заказать диплом по актуальной специальности?
    Приобрести диплом университета.
    https://violetshop.vn/
    Рады помочь!

  27. Tariorflw表示:

    Привет, друзья!
    Где заказать диплом специалиста?
    Купить диплом университета.
    https://arcohunter.ru/taxonomy/term/801
    Рады оказать помощь!

  28. Earlene.H表示:

    Very interesting points you have mentioned, thanks for putting up.Money from blog

  29. Diplomi_sakl表示:

    купить диплом медицинского вуза купить диплом медицинского вуза .

  30. Diplomi_irmn表示:

    купить аттестат в санкт петербурге ast-diplomas.com .

發佈留言

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