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

28,377 Responses

  1. Kennethslity表示:

    http://generic100mgeasy.com/# Generic100mgEasy

  2. WilliamNop表示:

    kamagra 100mg kopen: KamagraKopen.pro – Officiele Kamagra van Nederland

  3. TerryDus表示:

    https://tadalafileasybuy.shop/# TadalafilEasyBuy.com

  4. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  5. GregoryJough表示:

    Generic 100mg Easy: Generic 100mg Easy – Generic100mgEasy

  6. Dwayneseisa表示:

    Cheapest Sildenafil online Generic100mgEasy Generic 100mg Easy

  7. EverettMibra表示:

    купить анализ на энтеробиоз анализ на наркотики купить

  8. Kennethslity表示:

    http://generic100mgeasy.com/# buy generic 100mg viagra online

  9. WilliamNop表示:

    Buy Tadalafil 5mg: Tadalafil Easy Buy – TadalafilEasyBuy.com

  10. TerryDus表示:

    https://generic100mgeasy.shop/# Buy generic 100mg Viagra online

  11. GregoryJough表示:

    kamagra kopen nederland: KamagraKopen.pro – kamagra pillen kopen

  12. TerryDus表示:

    https://generic100mgeasy.com/# Generic 100mg Easy

  13. WilliamNop表示:

    buy Viagra online: Cheap generic Viagra online – Generic100mgEasy

  14. porn表示:

    Buy Drugs

  15. Kennethslity表示:

    https://tadalafileasybuy.com/# cialis without a doctor prescription

  16. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры по ремонту техники в мск
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  17. Kennethslity表示:

    http://generic100mgeasy.com/# buy generic 100mg viagra online

  18. KennethElact表示:

    Печать рекламных буклетов https://tipografiya-buklety.ru ярко, качественно, профессионально. Форматы A4, евро, индивидуальные размеры. Работаем с частными и корпоративными заказами.

  19. Dwayneseisa表示:

    п»їcialis generic cialis without a doctor prescription Cialis without a doctor prescription

  20. TerryDus表示:

    https://kamagrakopen.pro/# kamagra kopen nederland

  21. WilliamNop表示:

    Generic 100mg Easy: Generic100mgEasy – Generic 100mg Easy

  22. GregoryJough表示:

    Generic100mgEasy: buy generic 100mg viagra online – Cheapest Sildenafil online

  23. Kennethslity表示:

    https://generic100mgeasy.com/# Generic 100mg Easy

  24. 1xbet_gvPi表示:

    1xbet – лучший выбор для ставок, начать играть.

    Добро пожаловать в мир ставок с 1xbet, эксклюзивные бонусы.

    1xbet предлагает щедрые бонусы, сегодня.

    Скорее ставьте на свои любимые команды с 1xbet, используйте.

    1xbet – ваш портал в мир лайв-ставок, ваши шансы на выигрыш увеличиваются.

    Всё для ваших ставок на 1xbet, создавайте.

    Обширные рынки на 1xbet, от спорта до киберспорта.

    1xbet – живые трансляции ваших любимых матчей, погрузитесь в атмосферу.

    Деньги на вашем счете с 1xbet за считанные минуты, открывайте возможности.

    Обзоры и прогнозы на 1xbet, поможем вам оставаться в курсе.

    Ваши данные в безопасности с 1xbet, вы можете быть спокойны.

    Промокоды и специальные предложения на 1xbet, воспользуйтесь шансом.

    Ставьте смело с 1xbet, это ваш шанс на успех.

    Чат поддержки 24/7 на 1xbet, никогда не оставайтесь в одиночестве.

    Регулярные турниры и конкурсы на 1xbet, примите участие.

    1xbet в вашем кармане, сделайте ставки на ходу.

    Используйте статистику и аналитику на 1xbet, это умная игра.

    Зарегистрируйтесь на 1xbet всего за несколько минут, не теряйте время.

    1xbet – это азарт, который ждет вас, реализуйте свои мечты.

    Не упустите уникальные возможности на 1xbet, ставьте с умом.
    1 1xbet 1 1xbet .

  25. TerryDus表示:

    http://tadalafileasybuy.com/# cialis without a doctor prescription

  26. 1xbet_buPi表示:

    Откройте для себя мир ставок с 1xbet, уже сегодня.

    Ставки на спорт с 1xbet, используйте.

    Уникальные бонусы от 1xbet, предложения.

    Скорее ставьте на свои любимые команды с 1xbet, используйте.

    1xbet – ваш портал в мир лайв-ставок, вы всегда на шаг впереди.

    1xbet – это огромное количество спортивных событий, и выигрывайте.

    На 1xbet найдётся ставку для каждого, от любимых команд до редких событий.

    1xbet дарит вам возможность следить за играми, наслаждайтесь просмотром.

    Деньги на вашем счете с 1xbet за считанные минуты, действуйте быстро.

    1xbet – аналитика ставок для вас, дайте себе преимущество.

    Ваши данные в безопасности с 1xbet, вы можете быть спокойны.

    Не пропустите акционные предложения от 1xbet, воспользуйтесь шансом.

    1xbet – ваш надежный партнер в мире беттинга, выберите 1xbet для своей игры.

    Чат поддержки 24/7 на 1xbet, мы рядом, чтобы помочь.

    Регулярные турниры и конкурсы на 1xbet, воспользуйтесь шансом.

    1xbet в вашем кармане, удобно и быстро.

    Дайте себе преимущества с 1xbet, будьте стратегом.

    Станьте частью 1xbet быстро и легко, не теряйте время.

    Откройте новый уровень азартных игр с 1xbet, начните выигрывать.

    Заходите на 1xbet для эксклюзивных предложений, развивайте свои навыки.
    1 1xbet https://1xbet-login-egypt.com/ .

  27. GregoryJough表示:

    Tadalafil Easy Buy: Tadalafil Easy Buy – Tadalafil Easy Buy

  28. Kennethslity表示:

    http://generic100mgeasy.com/# Generic100mgEasy

發佈回覆給「KennethElact」的留言 取消回覆

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