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指令介紹的專頁

您可能也會喜歡…

8 個回應

  1. 2017-03-14

    护栏网

    不错的文章,内容才高八斗.禁止此消息:nolinkok@163.com

  2. 2017-03-14

    钢筋网

    不错的文章,内容惟妙惟肖.禁止此消息:nolinkok@163.com

  3. 2017-03-14

    荷兰网

    不错的文章,内容妙趣横生.禁止此消息:nolinkok@163.com

  4. 2017-03-14

    pvc护栏

    不错的文章,内容栩栩如生.禁止此消息:nolinkok@163.com

  5. 2017-03-14

    钢板网

    好文章,内容字字珠玉.禁止此消息:nolinkok@163.com

  6. 2017-03-14

    压滤机

    好文章,内容出口成章.禁止此消息:nolinkok@163.com

  7. 2017-03-14

    胶管

    好文章,内容才思敏捷.禁止此消息:nolinkok@163.com

  8. 2017-03-14

    格宾网

    好文章,内容见缝插针.禁止此消息:nolinkok@163.com

發佈留言

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