Angular.js [03] - ng-show / ng-hide 顯示隱藏元件

1.6 Not For Sale 140 PTS

We've added two new properties to our product that we can use on the HTML side. The first of these two iscanPurchase, which is a boolean indicating if the product can be purchased. The second is soldOut which, as you can imagine, is a boolean indicating if the product is sold out.

Use these two new properties in our HTML page to solve the following objectives

1.主要利用下面紅字的地方來做index內的顯示跟隱藏

> app.js

(function() {
var app = angular.module('gemStore', []);

app.controller('StoreController', function(){
this.product = gem;
});

var gem = {
name: 'Azurite',
price: 110.50,
canPurchase: false,
soldOut: true
};
})();

2.先使用ng-show因canPurchase: false 把不能賣的隱藏掉

>index.html

<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="product row">
<h3>
{{store.product.name}}
<em class="pull-right">${{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
</body>
</html>

3.再來把整個div都隱藏掉 因ng-hide的value為true

>index.html

<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="product row" ng-hide="store.product.soldOut">
<h3>
{{store.product.name}}
<em class="pull-right">${{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
</body>
</html>