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

1,981 Responses

  1. EddieLip表示:

    ivermectin for ringworm in cattle stromectol 12 mg tablets stromectol for sale

  2. Wfskbi表示:

    amoxicillin 250mg sale – azithromycin 500mg usa brand levitra 20mg

  3. Johnnyden表示:

    cialis from india tadalafil 10mg price cialis 20mg

  4. Johnnyden表示:

    tadalafil best price 20 mg cialis from india where to buy liquid cialis

  5. Johnnyden表示:

    tadalafil cialis 20mg tadalafil tablets 20 mg india

  6. Johnnyden表示:

    price for viagra price for viagra price for viagra

  7. Llvxbd表示:

    order ampicillin 250mg generic – ciprofloxacin 1000mg oral cialis generic

  8. catjann表示:

    Last, but not least, no programming skills are required as Dr.Batcher comes with an automated scripting editor.

    Features:

    Create, modify, or search for batches

    Startup Manager application for Windows

    Control ‘app secret’ after batch processing

    Checks Windows versions

    Browser based

    Create, modify, or search for batch files
    Dr.Batcher helps you by letting you create, modify or search for any batch files. You can do https://helmdysprafoot.weebly.com

    6add127376 catjann

  9. makalovy表示:

    Check it out and let us know what you think of it.A plurality of transducer arrays are available for providing simultaneous signals in pairs of transducer elements. The signal pair is provided in agreement with a predetermined audio sampling frequency. Herein is audio samples are electrically converted analog-to-digital.
    The output of the transducer arrays is logically selected by a switch matrix in accordance with a switch definition to provide sampling, amplitude-wise balanced and corresponding amplified output signals from the switch matrix. The amplified output signals are converted into electrical signals by a first signal driver and the electrical signals are communicated across a fixed separation http://images.google.com.mx/url?q=https://rautachurchlig.weebly.com

    6add127376 makalovy

  10. mikgas表示:

    If you decide to use GT Web Browser, be sure to get its source code as well. This will offer you a better insight into the program and help you get the most out of its features.
    GT Web Browser was reviewed by Lucy Davis, last updated on June 25th, 2012Q:

    How to inform SSD1306 display driver that it might be used with additional layers

    I will use an SSD1306 display on an ESP8266 and I’m using a https://edinmemo.weebly.com

    6add127376 mikgas

  11. rafflor表示:

    There’s no way to change the interface skin, either.
    Cryptographic Text Converter holds a 4.6 rating out of 10 points on our website. A majority of the five software reviews we’ve seen for this program all rate it at four stars.

    Business owners can use fingerprint scanners to check someone into a building, log the time, access rooms, and determine whether visitors have special access like gun permits.
    Now, businesses can monitor the number of fingerprints and know the average wait http://www.mcclureandsons.com/Projects/FishHatcheries/Baker_Lake_Spawning_Beach_Hatchery.aspx?Returnurl=https://asebextis.weebly.com

    6add127376 rafflor

  12. garbir表示:

    It supports ALL HAMMER-supported drive controllers, enabling insight where the situation requires.
    Data can be filtered according to the percentage and time-span (see “Filter on time” in the “TweakList” menu).
    There is also a widget available to display the current temperature.
    The current temperature can be saved to a file.
    Monitoring the system load can be useful in deciding to restart the system (e.g. when the number of processes/programs exceed a https://lesstantvolria.weebly.com

    6add127376 garbir

  13. elisail表示:

    Version 1.0.1.0 (17 March 2012) – (MINOR BUG FIX)
    Changes:
    – Fixed uninstalling of VBO plugin.
    Version 1.0.0.0 (2 November 2011) – NEW FEATURE:
    – Added support for VBO 2.2 (MINOR BUG FIX)
    – Added support for a user-configurable eclipse plugin path (MINOR BUG FIX)
    – Fixed a problem with 3 https://cse.google.com.my/url?q=https://inanseermi.weebly.com

    6add127376 elisail

  14. malwero表示:

    Stay Current

    Stay future-proof. Viewers are already busy looking elsewhere for the next great photo, story, graphic and video idea. With FocalPoint, keep them interested with options that will limit the way your future search results look. From vintage effects to sharp filters, FocalPoint has something for everyone.Q:

    SVG Canvas and smooth motion

    I’m new to SVG and I found a lot of related topics to my question but it’s https://opocspirdisf.weebly.com

    6add127376 malwero

  15. graiorl表示:

    NOTE!
    In addition to the Hudson server you installed Hudson Tray Tracker on, you need to have at least 1 child project configured on the same Hudson server. I have tested this with one “master” and two “build agents”, all of them “one off” child projects.

    The main window of Hudson Tray Tracker.

    How to get it?

    Install it as “Optional Update” just as you’re going to install the Hudson Server. (The Hudson Window https://maubotabtann.weebly.com

    6add127376 graiorl

  16. Johnnyden表示:

    stromectol stromectol for sale stromectol 12 mg tablets

  17. jeryger表示:

    Кеш принят от

    Мессенджер

    Video game Audio To Converter is a handy codec converter tool that helps you to correctly extract audio from almost all video games in a large number of popular formats and save those data to your computer hard drive.
    Features
    Quick conversions – Audio To Converter can easily convert between the following formats: WMA, OGG, MP http://www.deacguilalba.com/banner/banner.php?bid=30&bn_cate=A1&url=https://citahelpba.weebly.com

    6add127376 jeryger

  18. sileelly表示:

    Aside from that, there are no downsides for the program to show up in our evaluation, making the utility worth a try.A new battery-powered device that delivers therapy to the brain has the potential to vastly improve the lives of stroke patients. The suit incorporates a sophisticated sensor and an electrode that mimics how the nerves work in the body to help communicate electrical signals from the brain to the muscles.

    Representative Image

    WASHINGTON: A new battery-powered device that delivers therapy http://marcellospizzapasta.com/?URL=https://betodobdest.weebly.com

    6add127376 sileelly

  19. corjose表示:

    Device CheckerX

    Device CheckerX is a device identification application for Intel Galileo platform used to identify and compare devices based on their manufacturer or model number. It is fully compatible with both Bluetooth and Bluetooth Low Energy version in embedded systems. It helps you to identify devices in various scenarios, from ad hoc pairings to complex systems based on so called central devices.

    BlueCARE SDK

    BlueCARE SDK is an open source software development kit for developing Bluetooth-enabled https://ledbetocci.weebly.com

    6add127376 corjose

  20. joshmyka表示:

    By clicking the Start Button, you close the Overview of all user information on your computer.

    Copyright Snapfiles.com SearchTerms:

    NOTE: Production of this software is complete. All functionality is currently
    available to registered owners of the program. Please support Snapfiles.com and do not share it with other users or export it.

    7 Comments

    I tried it on my computer but the “Add Startup Folder for Signed On User” option was https://breathmotchire.weebly.com

    6add127376 joshmyka

  21. dynnjus表示:

    The good:
    Command line arguments to perform detailed scans
    Good detection rate
    Cons:
    Cli interfaces are hard to set-up manually
    No reporting in online control panel
    Available for download for Windows and Mac

    PatrolGuru 4.2 – Power Loss Protection Scheme

    PatrolGuru (PatrolGuru 4.2) is an innovative laptop-based toolkit that offers you total laptop security. It includes multiple laptop security features that are designed to protect https://lodelole.weebly.com

    6add127376 dynnjus

  22. jemkahl表示:

    The Getting Started guide or the Updated list might be useful.

    Publisher’s description

    The name Exercise Recorder is not only a good description and name of this app. It also perfectly describes what it is for.

    The purpose of this software is simple. It lets you quickly write the things you need and will want to record during your workout in an easier and less constraining interface.

    Some of the main reasons it does this are:

    – It can be installed https://tedumusmi.weebly.com

    6add127376 jemkahl

  23. Johnnyden表示:

    where to buy liquid cialis lowest price tadalafil tadalafil 20 mg buy online

發佈留言

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