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

  1. AdolfoAnove表示:

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

  2. Thomasjoync表示:

    erectile dysfunction cure canadianpharm1st how to overcome ed

  3. Appreciated this entry. It’s very well-researched and full of useful details. Excellent effort!

  4. Frankmor表示:

    prescription drugs without doctor approval http://indianpharmstar.com/# indian pharmacy online

  5. AdolfoAnove表示:

    mexican drugstore online: mexican pharmacy – mexican border pharmacies shipping to usa

  6. Scottlully表示:

    buy medicines online in india: indian pharm – best india pharmacy

  7. turmeric hack表示:

    This post is fantastic! Filled with valuable insights and extremely clear. Thanks for providing this.

  8. GLUCO 6表示:

    This post is wonderful! Filled with valuable insights and highly articulate. Thanks for providing this.

  9. CurtisIncix表示:

    казино вавада: vavada-kazi.ru – вавада казино онлайн

  10. DarioTob表示:

    pinup kazi: pinup – пин ап казино

  11. Wonderful article. It’s highly clear and filled with beneficial information. Thanks for providing this content.

  12. Отличный сайт! Всем рекомендую!Дневники вампира

  13. HenrydeT表示:

    вавада vavada-kazi.ru казино вавада

  14. CurtisIncix表示:

    pinup kazi: pinup kazi – pinup

  15. Jamesdiure表示:

    пин ап вход: пин ап зеркало – пинап казино

  16. DarioTob表示:

    пинап казино: pinup – pin up казино

  17. Josephmax表示:

    https://vavada-kazi.ru/# вавада казино

  18. DarioTob表示:

    пин ап вход: пинап казино – pinup-kazi.ru

  19. CurtisIncix表示:

    pinup: pinup-kazi.kz – пин ап кз

  20. Excellent post. I discovered the information highly useful. Adored the method you clarified everything.

  21. Jamesdiure表示:

    pinup kazi: пин ап зеркало – пинап казино

  22. This is highly educational. I really enjoyed perusing it. The details is very arranged and straightforward to follow.

  23. Fantastic article. I discovered the information highly useful. Adored the way you detailed everything.

  24. Excellent post. I thought the content extremely helpful. Loved the manner you explained the content.

  25. HenrydeT表示:

    вавада вавада казино зеркало вавада казино онлайн

  26. Alpha Bites表示:

    This article is highly educational. I truly enjoyed reading it. The information is very well-organized and easy to follow.

  27. DarioTob表示:

    пинап казино: пин ап вход – pinup

  28. Josephmax表示:

    http://vavada-kazi.ru/# вавада казино

  29. DarioTob表示:

    vavada-kazi.ru: vavada kazi – вавада казино

發佈留言

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