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

  1. Nelsonbluck表示:

    mexican online pharmacies prescription drugs: buying prescription drugs in mexico online – mexico drug stores pharmacies

  2. Arnoldten表示:

    medicine in mexico pharmacies medicine in mexico pharmacies buying from online mexican pharmacy

  3. Reent表示:

    Apply to receive a $1500 scholarship up to full-tuition when you apply and are accepted. Mathematical Finance A background in mathematics is extremely useful for a wide variety of career options. A major or minor in Mathematics prepares students for positions in business, industry, government, or education, or for entry into graduate programs. In fact, a recent study showed that the top 15 highest earning college degrees all have a common element: significant competency in mathematics. Many professions require mathematical proficiency-particularly in the natural and medical sciences. But in practically all cases, the study of math assists students in building logical, analytical and problem-solving skills that apply to generally any profession. Apply to receive a $1500 scholarship up to full-tuition when you apply and are accepted.
    https://lab.quickbox.io/imbopizdi1981
    Note: Students on Mathematics and Physics or Theoretical Physics programmes may elect to undertake modelling, simulation, control software design or equivalent aspects of the second project as an alternative to experimental aspects. The student must have demonstrated a pass in all the ILOs of the first mini-project to qualify for this option. Welcome to TeachEngineering’s Engineering Design Process curricula for Grade 6-8 Educators! Physics is the natural science that studies matter, motion and energy through space and time, including the relation, if any, to energy and force. To make magnetic slime, you require liquid starch, white glue, iron oxide powder, bowl, spoon, measuring cup, and neodymium magnet. The first step to making a magnetic slime is to pour 1 4 portion of white glue in a bowl. Now, add 2 tablespoons of an iron oxide powder to the white glue and mix them well. Fill 1 8th portion of the measuring cup with liquid starch and add it to the mixture. Stir well to form slime. Knead the slime with bare hands. Now, bring a ferromagnetic object near the magnetic slime, the slime tends to get attracted, and covers the object from outside. This particular project demonstrates the magnetic behaviour of objects.

  4. Lazrvct表示:

    Здравствуйте!
    Купить диплом ВУЗа.
    vocal.com.ua/node/62301

  5. Spot on with this write-up, I really think this website wants way more consideration. I?ll most likely be again to read way more, thanks for that info.

  6. Lazrarh表示:

    Привет, друзья!
    Мы готовы предложить дипломы любой профессии по доступным ценам.
    autogroupe.ru/poluchite-diplom-bez-lishnih-usiliy

  7. Uazrbfl表示:

    Здравствуйте!
    Приобрести диплом о высшем образовании.
    ls.monetka.in.ua/2024/07/08/diplomy-attestaty-i-svidetelstva-v-luchshem-onlayn-magazine.html

  8. Arnoldten表示:

    mexico drug stores pharmacies buying prescription drugs in mexico mexican pharmaceuticals online

  9. Diplomi_ogEa表示:

    Здравствуйте!
    Купить документ о получении высшего образования вы можете у нас в Москве.
    diplomasx.com/kupit-diplom-s-registraciej

  10. Diplomi_utEa表示:

    Привет, друзья!
    Купить документ ВУЗа можно у нас.
    diploms-x.com/kupit-diplom-novosibirsk

  11. Dnrthul表示:

    Привет, друзья!
    Купить документ ВУЗа можно у нас в столице.
    ast-diplom24.ru/kupit-diplom-magistra
    Хорошей учебы!

  12. Reent表示:

    Contact us: feedback@centraljersey Times Higher Education: Global University Employability Ranking TEAM-NB set up a new date for the IVDR technical In the Accelerator category, MHSNB is recognized for launching an integrated health care system with the Government of New Brunswick in January 2018. Today, IRCC minister Sean Fraser and New Brunswick immigration minister Arlene Dunn announced a new immigration program for the province. Corporate Plans and Projects   The New Brunswick Department of Transportation and Infrastructure (DTI) has advised the Town of Salisbury that Route 106 will be closed at Ontario Drive for a culvert replacement on Tuesday, September 19, 2023. The closure is expected to begin at 8:30AM on… Spring weight restrictions have now been lifted on highways across southern New Brunswick.
    https://tysonepyi332225.wizzardsblog.com/26750493/fathers-day-social
    Two other shows affiliated with Turning Point USA ― Frontlines with Drew Hernandez and Human Events Daily with Jack Posobiec ― also appear on the channel. Frontlines had six episodes removed from YouTube in August. Real America’s Voice became the favored platform for Bannon’s show, “War Room” after YouTube removed it. That happened after the Jan. 6, 2021, riot at the U.S. Capitol. Be sure to check out Real America’s Voice, a 24 7 news and entertainment network featuring an array of quality shows including Ringside Politics. You can also get more information at Real America’s Voice Facebook Page. The network has gained a following among conservative viewers who feel that mainstream news outlets are biased against conservative viewpoints. However, it has also faced criticism from some who accuse it of spreading misinformation and promoting conspiracy theories.

  13. WayneCoirl表示:

    buying prescription drugs in mexico: medication from mexico pharmacy – medication from mexico pharmacy

  14. DominicJaw表示:

    purple pharmacy mexico price list: buying from online mexican pharmacy – purple pharmacy mexico price list

  15. WayneCoirl表示:

    medicine in mexico pharmacies: mexico pharmacies prescription drugs – buying prescription drugs in mexico

  16. DominicJaw表示:

    mexican online pharmacies prescription drugs: buying prescription drugs in mexico online – purple pharmacy mexico price list

  17. Trefcvv表示:

    Привет, друзья!
    Как купить диплом о высшем образовании с минимальными рисками
    gaigoimoinhat.xyz/купить-диплом-о-высшем-образовании-со
    Окажем помощь!.

  18. Mazrhlq表示:

    Здравствуйте!
    Пошаговая инструкция по официальной покупке диплома о высшем образовании
    diplomman.ru

  19. Arnoldten表示:

    medication from mexico pharmacy pharmacies in mexico that ship to usa pharmacies in mexico that ship to usa

  20. Percylelay表示:

    AI Nude Generator https://ainudegenerator.app Transform Photos with AI Nude App.

  21. Xazryqo表示:

    Здравствуйте!
    Купить диплом старого образца, можно ли это сделать по быстрой схеме?
    landik-diploms-srednee.ru/kupit-diplom-v-ekaterinburge

  22. Manriol表示:

    Добрый день!
    Купить документ института
    ast-diplom.com/kupit-diplom-magistra

  23. Nelsonbluck表示:

    mexico pharmacies prescription drugs: mexican border pharmacies shipping to usa – mexican online pharmacies prescription drugs

  24. Dnrtdpa表示:

    Привет!
    Купить документ ВУЗа можно у нас.
    ast-diplomy.com/kupit-diplom-omsk
    Удачи!

  25. Nelsonbluck表示:

    buying prescription drugs in mexico online: mexican drugstore online – mexican drugstore online

  26. Arnoldten表示:

    pharmacies in mexico that ship to usa mexican drugstore online mexican pharmacy

發佈留言

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