咖啡____With藍。-小伙

藍小伙

2014-07-09

[AngularJS]範例:珠寶商店-多顆寶石顯示

  • 855
  • 0

摘要:[AngularJS]範例:珠寶商店-多顆寶石顯示

 

寶石商店

現在已經可以做珠寶的基本操作(購買及完售時不顯示)。接下來，要加入顆珠寶並顯示。

 

  • 新增珠寶:

 

  • 修正html:(目前這個做法比較不好，以下會有更好的方法)

 

  • 修正html使用Anjular 標籤:(更好的做法)

 

  • 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-repeat="product in store.products "  >
        <div ng-hide="product.soldOut">
            <h1> {{product.name}} </h1>

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

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

 

  • js code

    -

    //建構
AppConstructor()

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

    app.controller('StoreController', function()
    {
        this.products=gems;
    });
    var gems=[
    {
        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:false
    },
        {
            name:'"PentagonalGem',
            price:3.85,
            description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.',
            //是否開放購買
            canPurchase: true,
            //是否銷售完畢
            soldOut:false
        }
    ]
}

 

Result:




 

By-藍小伙

本頁段落