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

  1. Jamesmamma表示:

    Activision and Call of Duty https://activision.call-of-duty.cz leading video game publisher and iconic shooter with a long history market dominance.

  2. Earnestsox表示:

    Young Briton Lando Norris https://mclaren.lando-norris.cz is at the heart of McLaren’s Formula 1 renaissance, regularly achieving podium finishes and winning.

  3. DouglasOpero表示:

    The legendary Spanish racer Fernando Alonso https://formula-1.fernando-alonso.cz returns to Formula 1 after several years.

  4. StacySwers表示:

    Jon Jones https://ufc.jon-jones.cz a dominant fighter with unrivaled skill, technique and physique who has conquered the light heavyweight division.

  5. Henrytal表示:

    An article about the triumphant 2023 Ferrari https://ferrari.charles-leclerc.cz and their star driver Charles Leclerc, who became the Formula world champion 1.

  6. Nmmydh表示:

    buy cheap durex gel – purchase durex condoms cost zovirax

  7. Raymondemimi表示:

    Witness the thrilling story of Jiri Prochazka’s https://ufc.jiri-prochazka-ufc.cz rapid rise to the top of the UFC’s light heavyweight division, marked by his dynamic fighting style and relentless determination.

  8. Dariusexews表示:

    Carlos Vemola https://oktagon-mma.karlos-vemola.cz Czech professional mixed martial artist, former bodybuilder, wrestler and member Sokol.

  9. Edwardkic表示:

    An indomitable spirit, incredible skills and five championships – how Kobe Bryant https://losangeles-lakers.kobe-bryant.cz became an icon of the Los Angeles Lakers and the entire NBA world.

  10. Derrickdonee表示:

    The inspiring story of the ascent of the young actress Anya Taylor https://queensmove.anya-taylor-joy.cz to fame after her breakthrough performance in the TV series “The Queen’s Move”. Conquering new peaks.

  11. GarryVok表示:

    The inspiring story of Zendaya’s rise https://spider-man.zendaya-maree.cz, from her early roles to her blockbuster debut in Marvel Cinematic Universe.

  12. RobertDix表示:

    Emily Olivia Laura Blunt https://oppenheimer.emily-blunt.cz British and American actress. Winner of the Golden Globe (2007) and Screen Actors Guild (2019) awards.

  13. Davidzoola表示:

    Follow Liam Neeson’s career https://hostage.liam-neeson.cz as he fulfills his potential as Brian Mills in the film “Taken” and becomes one of the leading stars of Hollywood action films.

  14. Richardbop表示:

    Jackie Chan https://peakhour.jackie-chan.cz from a poor boy from Hong Kong to a world famous Hollywood stuntman. The incredible success story of Jackie Chan.

  15. Calvintok表示:

    Try to make a fascinating actor Johnny Depp https://secret-window.johnny-depp.cz, who will become the slave of his strong hero Moudriho Creeps in the thriller “Secret Window”.

  16. RobertSmola表示:

    Fascinating event related to this Keanu Reeves helped him in the role of the iconic John Wick characters https://john-wick.keanu-reeves.cz, among which there is another talent who has combat smarts with inappropriate charisma.

  17. ZacheryHoono表示:

    The fascinating story of Marcus Rashford’s ascent https://manchester-united.marcus-rashford-cz.com to glory in the Red Devils: from a young talent to one of the key players of the team.

  18. Keithamasp表示:

    The fascinating story of Antonio Rudiger’s transfer https://real-madrid.antonio-rudiger-cz.com to Real Madrid and his rapid rise as a key player at one of the best clubs in the world.

  19. Kennethunomo表示:

    The story of how the incredibly talented footballer Riyad Mahrez https://alahli.riyad-mahrez-cz.com reached new heights in career, moving to Al Ahly and leading the team to victory.

  20. It’s the best time to make a few plans for the long run and it’s time to be happy. I’ve read this put up and if I may I want to recommend you few attention-grabbing things or tips. Perhaps you can write subsequent articles relating to this article. I wish to learn more issues approximately it!

  21. JaimeJoize表示:

    A fascinating story about how David Alaba https://realmadrid.david-alaba-cz.com after starting his career at the Austrian academy Vienna became a key player and leader of the legendary Real Madrid.

  22. JimmyBlopy表示:

    Star Brazilian striker Gabriel Jesus https://arsenal.gabriel-jesus-cz.com put in a superb performance to lead Arsenal to new heights after moving from Manchester City.

  23. Walterwrinc表示:

    The young Uruguayan Darwin Nunez https://liverpool.darwin-nunez-cz.com broke into the elite of world football, and he became a key Liverpool player.

  24. CurtisJek表示:

    Romelu Lukaku https://chelsea.romelu-lukaku-cz.com, one of the best strikers in Europe, returns to Chelsea to continue climbing to the top of the football Olympus.

  25. Joshuatex表示:

    Study of the playing style of Toni Kroos https://real-madrid.toni-kroos-cz.com at Real Madrid: his accurate passing, tactical flexibility and influence on the team’s success.

  26. RonaldDof表示:

    Find out how Bruno Guimaraes https://newcastleunited.bruno-guimaraes-cz.com became a catalyst for the success of Newcastle United thanks to his technical abilities and leadership on the field and beyond.

  27. JamesSon表示:

    Find out how Virgil van Dijk https://liverpool.virgil-van-dijk-cz.com became an integral part of style игры «Liverpool», ensuring the stability and success of the team.

  28. GeorgeLen表示:

    Thibaut Courtois https://realmadrid.thibaut-courtois-cz.com the indispensable goalkeeper of “Real”, whose reliability, leadership and outstanding The game made him a key figure in the club.

發佈留言

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