AngularJS – Directive 介紹篇

接續前面提到的關於產品展示頁面的製作,我們在HTML文件上面加入一個Add to Cart的按鈕,但是希望這個按鈕可以有條件性的顯示或隱藏,我們可以在該按鈕的HTML標籤中加入ng-show=”store.product.canPurchase”的屬性,這個屬性會去判斷在gem數列中canPurchase中的值是否為true,若不是則該按鈕不顯示於畫面上,反之則會顯示加入購物車(Add to Cart)的按鈕。

AngularJS Part3 Slide1

在這個案例中canPurchase就算是在數列中的顯示參數,其實這個參數並不是一定要叫canPurchase這個名稱,可以自行決定名稱,例如在馬老師製作的案例中,我就是利用buttonShow這樣的參數名稱,大家也可以在JS Bin上面看看這個案例的程式碼。

<!DOCTYPE html>
<html ng-app="store">
<head>
<meta name="description" content="AngularJS directivesExample 1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>AngularJS directivesExample 1</title>
</head>
<body>
  
  <div ng-controller="StoreController as store">
    <h1>{{ store.product.name }}</h1>
    <h2>NT${{ store.product.price }}</h2>
    <p>{{ store.product.description }}</p>
    <button ng-show="store.product.buttonShow">加入購物車</button>
  </div>
  
</body>
</html>
(function(){
  var app = angular.module('store',[]);
  
  app.controller('StoreController',function(){
    this.product = item;
  });
  
  var item = {
    name:"馬老師雲端研究室 滑鼠墊",
    price:"350",
    description:"有些人認為滑鼠墊就只是種簡單的產品。無非是將滑鼠放於上方並將之滑來拖去。 “表面”上來說確實如此(一語雙關)。但實際上,製造能帶來卓越遊戲體驗的滑鼠墊卻需要結合眾多科學、技術和工藝。身為遊戲滑鼠技術的世界領先者,對如何使滑鼠感測器高效運作我們獨樹一幟。運用專門知識來製造適合的滑鼠墊表面,讓滑鼠感測器得以作出高效而精確的反應。",
    buttonShow: false
  };
  
})();

另外還有一種資料顯示的手法,我們可以在gem數列中另外加入soldOut這個參數,而在div的HTML標籤中加入ng-show=”!store.product.soldOut”這樣的屬性,其中驚嘆號指的是不等於,所以這個屬性的意思即是當soldOut參數不等於true的時候要隱藏該div,也就是會隱藏所有的商品資訊。

AngularJS Part3 Slide2

不過這樣的表達方式並不是很直接,必須要做邏輯上的轉換,因為條件式是soldOut不等於true就顯示該商品,不是很容易搞懂,所以同樣的案例我們可以把HTML中的標籤的屬性改成ng-hide=”store.product.soldOut”,這樣一來我們只需要去看soldOut參數中的值是true或是false,如果賣完就不顯示;沒賣完就顯示,這是一個比較直覺的方法,透過JS Bin觀賞本案例的原始碼。

AngularJS Part3 Slide3

接下來看多項商品的製作方式,首先必須了解如何在Javascript的數列中加入多項商品的資料。

AngularJS Part3 Slide4

輸入了以上數列的資料後,在HTML的頁面上可以依下圖的方式呈現出多重商品的資訊,不過從以下的呈現方式可以看的出來,如果商品數量不僅僅是只有兩項,那頁面上面的HTML標籤就會過於複雜,所以下面的方法僅僅是讓大家了解邏輯的部分。

AngularJS Part3 Slide5

實際上呈現的方式可以參考下圖,是不是簡單多了,在JS Bin上面觀看。

AngularJS Part3 Slide6

接下來幫大家整理目前講解到的一些AngularJS的專有名稱說明:

  • Directives(指示) – 在HTML中觸發Javascript行為的參數。
  • Modules(模組) – 定義我們的應用程式。
  • Controllers(控制器) – 定義我們應用程式該如運作。
  • Expressions(表達式) – 我們的資料該如何的顯示在頁面上。
AngularJS Part3 Slide7

※以上截圖部分為AngularJS官方教學視訊,另有directive指令介紹的專頁

You may also like...

3,303 Responses

  1. Really liked going through this entry. It’s highly articulate and filled with useful insight. Many thanks for offering this.

  2. I would like to thank you for the efforts you have put in penning this website. I really hope to view the same high-grade content by you in the future as well. In fact, your creative writing abilities has inspired me to get my own, personal blog now 😉

  3. bookmarked!!, I love your website!

  4. roof repair表示:

    I really love your site.. Great colors & theme. Did you create this site yourself? Please reply back as I’m looking to create my own site and would love to know where you got this from or what the theme is called. Thank you!

  5. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  6. ShkafyKupevof表示:

    Отличный сайт! Всем рекомендую!шкафы купе на заказ

  7. tubidy mp3表示:

    Excellent post. I’m facing a few of these issues as well..

  8. This is fantastic! Packed with helpful insights and extremely articulate. Thank you for sharing this.

  9. A motivating discussion is worth comment. There’s no doubt that that you ought to write more about this subject, it might not be a taboo matter but generally people don’t discuss these topics. To the next! Cheers!

  10. Keo nha cai 5 – Kèo bóng đá. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  11. That is a good tip especially to those new to the blogosphere. Simple but very accurate info… Many thanks for sharing this one. A must read post.

  12. suzuki xl7表示:

    Oh my goodness! Impressive article dude! Many thanks, However I am experiencing troubles with your RSS. I don’t understand the reason why I am unable to subscribe to it. Is there anybody else having similar RSS problems? Anyone who knows the solution will you kindly respond? Thanx!

  13. Lsiktf表示:

    fosamax order online – buy alendronate 70mg online cheap medroxyprogesterone 10mg tablet

  14. CharlesDup表示:

    Ленинградская область известна многослойной геологической составом, что делает работу сверления скважин на воду особенным в каждом месте. Территория имеет разнообразие почв и скрытых пластов, которые нуждаются в профессиональный подбор при выборе позиции и метки сверления. Подземная вода может располагаться как на небольшой глубокости, так и быть на нескольких глубоких метров, что создает трудность бурения.

    Основной деталью, влияющих на способ добычи (https://www.vizd.ru/kak-samostoyatelno-ochistit-skvazhinu-ot-ila/ ), становится геология и расположение глубинного источника. В Ленинградской области чаще всего создают глубинные источники, которые гарантируют доступ к незагрязненной и постоянной воде из подземных пластов. Такие скважины отличаются длительным сроком эксплуатации и высоким качеством жидкости, однако их постройка нуждается высоких вложений и профессионального оборудования.

    Процесс сверления в регионе подразумевает использование высокотехнологичных аппаратов и средств, которые могут справляться с трудными породами и предотвращать возможные разрушения стенок скважины. Крайне важно, что следует помнить об санитарные требования и правила, так как вблизи некоторых населённых городов расположены охраняемые заповедные зоны и природные комплексы, что заставляет особый подход к буровым работам.

    Вода из глубоких скважин в Ленинградской области замечательна высоким качеством, так как она укрыта от поверхностных загрязнений и наполнена сбалансированный состав минералов. Это считает такие водоносные горизонты востребованными для частных домов и предприятий, которые выбирают долговечность и безопасную чистоту водного ресурса.

  15. Loved this article. It’s so comprehensive and filled with useful insight. Thank you for sharing such helpful information.

  16. 슬롯추천表示:

    I’m pretty pleased to find this page. I wanted to thank you for your time just for this fantastic read!! I definitely liked every part of it and I have you saved to fav to check out new stuff in your website.

  17. CharlesDup表示:

    Ленинградская область характеризуется многослойной геологической структурой, что делает задачу бурения скважин на воду специфическим в каждом регионе. Регион представляет собой многообразие слоев и скрытых слоев, которые требуют специализированный метод при выборе зоны и метки бурения. Водные ресурсы может протекать как на низкой высоте, так и достигать нескольких глубоких метров, что формирует трудность работ.

    Важнейшим аспектом, влияющих на способ добычи (https://www.vizd.ru/effektivnye-metody-prokachki-skvazhiny-ot-peschanyh-otlozhenij/ ), является геология и глубина водного горизонта. В Ленинградской области чаще всего строят глубинные источники, которые обеспечивают доступ к свежей и непрерывной воде из глубинных пластов. Такие скважины известны долгим сроком функционирования и высоким качеством жидкости, однако их бурение требует значительных затрат и особого оснащения.

    Методы создания в регионе подразумевает использование новейших машин и средств, которые могут управляться с плотными породами и предотвращать возможные обвалы стенок скважины. Важно, что следует помнить об экологически безопасные требования и правила, так как вблизи части населённых городов находятся охраняемые водные зоны и природоохранные территории, что диктует особый подход к буровым мероприятиям.

    Источник воды из глубоких скважин в Ленинградской области характеризуется отсутствием загрязнений, так как она защищена от поверхностных загрязнений и обогащена оптимальный состав полезных веществ. Это делает такие источники популярными для владельцев участков и организаций, которые ценят надежность и качество водного ресурса.

  18. 오피表示:

    Body Massage 오피

  19. CharlesDup表示:

    Ленинградская область отличается многослойной геологической структурой, что превращает задачу сверления скважин на воду уникальным в каждом участке. Территория имеет вариативность слоев и водоносных пластов, которые необходимы для экспертный метод при определении места и слоя пробивки. Подземная вода может залегать как на небольшой высоте, так и доходить до нескольких десятков, что влияет на трудоемкость работ.

    Важнейшим аспектом, определяющих тип воды (https://frei.ru/kak-izbavitsya-ot-peska-v-skvazhine/ ), является грунтовые слои и глубина подземной воды. В Ленинградской области чаще всего сверлят глубокие скважины, которые обеспечивают доступ к свежей и надежной воде из подземных структур. Такие скважины характеризуются длительным сроком использования и качественным качеством воды, однако их бурение нуждается в существенных средств и особого аппаратуры.

    Способы бурения в регионе включает использование высокотехнологичных устройств и технологий, которые могут оперировать с трудными породами и предотвращать возможные обвалы грунта скважины. Крайне важно, что следует помнить об экологические требования и правила, так как вблизи части населённых городов есть охраняемые водные зоны и защищенные зоны, что требует особый внимательный подход к буровым действиям.

    Вода из глубоких скважин в Ленинградской области характеризуется отличной чистотой, так как она скрыта от внешних воздействий и имеет правильный состав полезных веществ. Это считает такие источники необходимыми для коттеджей и организаций, которые выбирают стабильность и качество водообеспечения.

  20. CharlesDup表示:

    Ленинградская область характеризуется сложной геологической структурой, что определяет процедуру пробивки скважин на воду специфическим в каждом месте. Местность включает вариативность почв и водных пластов, которые нуждаются в качественный метод при определении позиции и глубины пробивки. Источник воды может залегать как на неглубокой уровне, так и быть на нескольких глубоких метров, что определяет трудоемкость работ.

    Ключевым моментом, определяющих тип скважины (https://roadnice.ru/nauka-i-tehnologii/skvazhina-na-2-doma/ ), становится грунтовые слои и расположение подземной воды. В Ленинградской области чаще всего создают глубинные источники, которые дают доступ к незагрязненной и непрерывной воде из глубинных слоев. Такие скважины отличаются надежным сроком службы и заметным качеством водоносных ресурсов, однако их бурение требует больших вложений и уникального оборудования.

    Процесс сверления в регионе предполагает использование современных машин и инструментов, которые могут управляться с трудными породами и защищать от возможные осыпи стенок скважины скважины. Крайне важно, что необходимо учитывать природоохранные требования и правила, так как вблизи нескольких населённых поселений существуют охраняемые водные объекты и заповедники, что требует особый внимание к буровым работам.

    Ресурсы воды из глубоких скважин в Ленинградской области известна отличной чистотой, так как она укрыта от вредных веществ и содержит гармоничный состав полезных веществ. Это формирует такие источники востребованными для частных домов и организаций, которые выбирают стабильность и чистоту водообеспечения.

  21. Gmfoia表示:

    order aygestin pills – order norethindrone sale yasmin pill

  22. Martinnuh表示:

    Устройство скважин на водные ресурсы — это ключевой этап в создании самостоятельного обеспечения водной системы частного дома. Этот метод включает предварительное обследование, геологическое изучение и гидрогеологическое обследование площадки, чтобы выбрать лучший участок для бурения. Глубина источника зависит от особенностей местности, что определяет её вид: абиссинский колодец, песчаный водозабор или подземная – https://techno-voda.ru/servoprivod-siemens-sqm33-750a9-obzor-i-primenenie/ . Качественно выполненная водозаборная скважина гарантирует чистую и бесперебойную добычу воды в любой сезон, исключая опасность исчезновения водного ресурса и попадания примесей. Современные технологии позволяют автоматизировать процесс добычи воды, делая проще её применение для бытовых нужд.

    После бурения скважины необходимо устроить водопровод, чтобы она была долговечной и устойчивой. Настройка заключается в оснащение насосами, установку очистительных систем и проведение трубопровода. Также следует рассчитать автоматический контроль, которая будет контролировать уровень воды и объём потребляемой воды. Сохранение тепла и защита от перебоев в зиму также остаются необходимыми. С профессиональным подходом к созданию источника и обустройству вы создадите частный участок комфортной системой, делая жизнь за городом насыщенной и комфортной.

  23. Martinnuh表示:

    Создание глубинных источников на водные ресурсы — это ключевой этап в создании самостоятельного обеспечения водоснабжения частного дома. Этот подход включает в себя подготовительные работы, исследование почвы и исследование водных ресурсов площадки, чтобы обнаружить лучший участок для бурения. Глубина скважины зависит от геологических условий, что влияет на её тип: песчаная скважина, песчаная скважина или глубокая – https://techno-voda.ru/jeffektivnaja-ustanovka-obratnogo-osmosa-awt-rob/ . Правильно спроектированная система забора воды дает качественную и бесперебойную поставку воды в любое время года, исключая шанс осушения и загрязнения. Технические достижения позволяют механизировать забор воды, облегчая её применение для домашнего хозяйства.

    После установки источника необходимо обустроить систему водоснабжения, чтобы она была долговечной и практичной. Обустройство предполагает монтаж насосов, подключение фильтров и проведение водопровода. Также необходимо рассчитать автоматический контроль, которая будет следить за напор и водозабор. Защита скважины от замерзания и обеспечение её бесперебойной работы в морозы также крайне важны. С грамотно выполненными работами к сверлению и обустройству вы создадите жилище качественной водой, обеспечивая удобство комфортной и удобной.

  24. Martinnuh表示:

    Бурение глубинных источников на воду — это основной процесс в обустройстве самостоятельного обеспечения водоснабжения частного дома. Этот метод включает подготовительные работы, геологическое изучение и гидрогеологическое обследование участка, чтобы найти наиболее удачное место для бурения. Расстояние до воды зависит от грунтовых особенностей, что зависит от её разновидность: песчаная скважина, песчаный водозабор или глубинная – https://techno-voda.ru/ustanovka-sistemy-obratnogo-osmosa-awt-ro-4-8040/ . Правильно спроектированная водная скважина обеспечивает питьевую и бесперебойную поставку воды в при любых условиях, исключая вероятность исчезновения водного ресурса и появления примесей. Современные технологии дают возможность настроить автоматический режим процесс добычи воды, делая проще её внедрение для семейного потребления.

    По завершении бурильных работ необходимо спроектировать подачу воды, чтобы она оставалась максимально эффективной и надежной. Организация содержит оснащение насосами, монтаж системы фильтрации и проведение водопровода. Также следует предусмотреть систему управления, которая будет следить за напор и потребление ресурса. Защита скважины от замерзания и обеспечение её бесперебойной работы в холода также имеют значение. С грамотно выполненными работами к бурению и организации вы создадите частный участок полноценным водоснабжением, гарантируя комфорт приятной и спокойной.

  25. I need to to thank you for this fantastic read!! I absolutely loved every little bit of it. I’ve got you saved as a favorite to look at new stuff you post…

  26. Earbuds表示:

    Oh my goodness! Amazing article dude! Thank you so much, However I am experiencing problems with your RSS. I don’t know why I am unable to join it. Is there anyone else having the same RSS issues? Anybody who knows the answer can you kindly respond? Thanx!

  27. Really liked perusing this post. It’s very well-written and full of helpful insight. Thank you for offering this.

  28. Appreciated this post. It’s highly well-researched and filled with valuable insights. Great work!

  29. Replica Sneakers rm244
    Replica Sneakers for women,Replica Sneakers for women rx513

  30. Hwjvdw表示:

    order bupropion 150mg generic – order xenical 120mg without prescription cheap shuddha guggulu without prescription

發佈留言

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