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

  1. Justinlib表示:

    http://pinup2025.com/# pinup2025.com

  2. Wdhnfa表示:

    provigil 100mg over the counter – buy cheap generic modafinil purchase combivir pills

  3. StevenAxofs表示:

    https://cenforce.icu/# cheapest cenforce

  4. JamesThync表示:

    buy erectile dysfunction medication: erectile dysfunction medications online – ed meds cheap

  5. BradleyPobby表示:

    http://kamagra.men/# sildenafil oral jelly 100mg kamagra

  6. Excellent entry. I am grateful for the effort you dedicated to offer such useful details. It is concise and extremely enlightening.

  7. BradleyPobby表示:

    https://drugs1st.pro/# drugs1st

  8. StevenAxofs表示:

    https://kamagra.men/# buy Kamagra

  9. Charlescek表示:

    erectile dysfunction drugs online: ed prescriptions online – ed medication online

  10. JamesThync表示:

    cheap semaglutide pills: semaglutide tablets store – rybelsus semaglutide tablets

  11. CoreyNeura表示:

    buy semaglutide semaglutide tablets for weight loss buy rybelsus online

  12. BradleyPobby表示:

    https://edpills.men/# affordable ed medication

  13. StevenAxofs表示:

    https://edpills.men/# buy ed pills online

  14. BradleyPobby表示:

    https://edpills.men/# cheapest erectile dysfunction pills

  15. Charlescek表示:

    semaglutide tablets price: cheap semaglutide pills – semaglutide best price

  16. StevenAxofs表示:

    https://semaglutidetablets.store/# semaglutide tablets

  17. BradleyPobby表示:

    http://edpills.men/# best online ed pills

  18. JamesThync表示:

    erectile dysfunction cure: best pill for ed – best cure for ed

  19. This article is amazing! Packed with useful insights and extremely well-written. Thanks for sharing this.

  20. BradleyPobby表示:

    https://edpills.men/# online ed drugs

  21. JamesThync表示:

    online ed pills: ed online treatment – buy erectile dysfunction medication

  22. RobertUnmab表示:

    cipro online no prescription in the usa: cipro online no prescription in the usa – cipro 500mg best prices

  23. ArmandoDat表示:

    zithromax antibiotic without prescription: zithromax 250 – purchase zithromax z-pak

  24. Jaimevoink表示:

    buy cytotec online Cytotec 200mcg price cytotec pills buy online

  25. JimmieTup表示:

    http://cytotec.top/# Misoprostol 200 mg buy online

  26. ArmandoDat表示:

    cost of generic clomid without dr prescription: cost generic clomid pill – get cheap clomid for sale

  27. RobertUnmab表示:

    buy cytotec online: п»їcytotec pills online – buy cytotec over the counter

  28. Man, I really enjoyed reading this message. You have convinced me to subscribe to your blog, but where can I find the RSS feed?

  29. Jaimevoink表示:

    п»їcipro generic cipro 500mg best prices cipro online no prescription in the usa

  30. TITANFLOW表示:

    Great entry. I thought the details extremely beneficial. Appreciated the way you explained everything.

發佈留言

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