咖啡____With藍。-小伙

藍小伙

2014-07-09

[AngularJS]範例:珠寶商店-產品可購買及可顯示設定

  • 992
  • 0

摘要:test

 

寶石商店

現在已經可以展現第一筆的資料了。接下來，我們要加入購物車的概念。新需求如下:

  1. 讓使用者可以購買 寶石。(可將寶石加入購物車中)

  2. 管理者可控制某 寶石 是某可加入購物車中。

  3. 當某 寶石 銷售完畢時，不顯示此商品。

  • 為 珠寶 新增兩個屬性。js如下:

  • 是否開放購買

  • 是否銷售完畢

var gem=
{
    name:'Dodecahedron',
    price:2.95,
    description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.',

    //是否開放購買
    canPurchase: true,

    //是否銷售完畢
    soldOut:true
}

 

  • 修改 html 前端介面:

    • 新增一個 Add a Cart 按鈕
    • 按鈕會依照 gem.canPurchase 屬性，來判斷是否顯示購物按鈕。

    • 當銷售完畢(soldOut is true)時，不顯示該產品資訊。(兩有種方法可以達到同樣的效果)

      • ng-show

      • ng-hide (這個場景裡，使用這個方法會更好)

 

 

  • html code

    -

    <!DOCTYPE html>
<html ng-app="store" >
<head lang="en">
    <script type="text/javascript" src="angular.min.js"></script>

    <script type="text/javascript" src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.js" />
    <meta charset="UTF-8">
    <title></title>
</head>
<body  ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut" >
        <h1> {{store.product.name}} </h1>

        <h2> ${{store.product.price}} </h2>

        <p> {{store.product.description}} </p>
        <button ng-show="store.product.canPurchase" >Add to Cart</button>
    </div>
</body>
</html>

 

  • js code

    -

    //建構
AppConstructor()

//將你的JavaScipt 放在一個閉包裡是一個好的習慣
function AppConstructor()
{
    app = angular.module('store', [ ]);

    app.controller('StoreController', function()
    {
        this.product=gem;
    });
    var gem=
    {
        name:'Dodecahedron',
        price:2.95,
        description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.',
        //是否開放購買
        canPurchase: false,
        //是否銷售完畢
        soldOut:true
    }
}

 

Result:




 

By-藍小伙

本頁段落