สิ่งที่ควรรู้

หลายคนคงเคยรู้จัก jQuery และได้ใช้ฟังก์ชั่น show() และ hide() กันมาบ้าง ใน AngularJS ก็มีเหมือนกันครับ โดยจะมี Directive 2 ตัวที่ทำการ hide & show คือ ng-hide และ ng-show

Ng-Show ทำงานยังไง ?

ng-show="เงื่อนไข หรือ ฟังก์ชั่น"

HTML tag ที่มี Directive ตัวนี้อยู่จะแสดงผล เมื่อเงื่อนไขเป็น จริง (True)

Ng-Hide คือ อะไร ?

ng-hide="เงื่อนไข หรือ ฟังก์ชั่น"

HTML tag ที่มี Directive ตัวนี้อยู่จะซ่อน เมื่อเงื่อนไขเป็น จริง (True)

Ng-if คือ อะไร ?

ng-if="เงื่อนไข หรือ ฟังก์ชั่น"

HTML tag ที่มี Directive ตัวนี้อยู่จะถูกลบออก เมื่อเงื่อนไขเป็น จริง (True)

ลองใช้ Ng-Show ,Ng-Hide ,Ng-If กันเถอะ

เราจะทำการแสดงวิธีการแสดงผลข้อมูลของ Ng-Show ,Ng-Hide ,Ng-If

1.เพิ่ม Attribute canPurchase ซูชิที่อร่อยที่สุดก็ย่อมมีจำนวนที่จำกัด ฉะนั้นในไฟล์ app.js เราจึงเพิ่ม Attribute ให้กับซูชิ

คือ canPurchase สามารถซื้อได้หรือไม่ โดยมีค่าเป็น Boolean

app.controller('storeController', function ($scope) {
		$scope.sushi = {
			name: 'Maguro',
			price: 200,
			description: "Fat Tuna",
			canPurchase: true
		};
	});

2.เพิ่มปุ่มสั่งซื้อและใส่ ng-show ในกรณีที่สามารถซื้อได้ จะมีปุ่มให้กดสั่งซื้อ ที่มี directive ng-show ลงในหน้า html

โดยเงื่อนไขของการแสดง คือ canPurchase

<div class="list-group">
	<div class="list-group-item" ng-controller="storeController as store">
		<h1>{{sushi.name}}</h1>
		<h2>{{sushi.price}} yen</h2>
		<p>{{sushi.description}}</p>
        <div ng-show="sushi.canPurchase">
		  <button class="btn btn-default">สั่งซื้อ</button>
        </div>
	</div>
</div>

3.เพิ่มข้อความขายหมด และเพิ่ม ng-hide ในกรณีสามารถซื้อได้ ข้อความ ขายหมดแล้วจ้า จะไม่ทำการแสดง โดยในข้อความดังกล่าวจะมี directive ng-hide ใส่ไว้

โดยเงื่อนไขของการแสดง คือ canPurchase

<div class="list-group">
	<div class="list-group-item" ng-controller="storeController as store">
		<h1>{{sushi.name}}</h1>
		<h2>{{sushi.price}} yen</h2>
		<p>{{sushi.description}}</p>
        <div ng-show="sushi.canPurchase">
		  <button class="btn btn-default">สั่งซื้อ</button>
        </div>
		<h3 ng-hide="sushi.canPurchase">ขายหมดแล้วจ้า</h3>
	</div>
</div>

4.เพิ่ม CheckBox และเพิ่ม ng-if ในกรณีที่ต้องการใส่วาซาบิ เพิ่ม directive ng-if

<div class="list-group">
	<div class="list-group-item" ng-controller="storeController as store">
		<h1>{{sushi.name}}</h1>
		<h2>{{sushi.price}} yen</h2>
		<p>{{sushi.description}}<span ng-if="checked && sushi.canPurchase"> + Wasabi</span></p>
            <div ng-show="sushi.canPurchase">
				ใส่วาซาบิ : <input type="checkbox" ng-model="checked" /></br>
			<button class="btn btn-default" >สั่งซื้อ</button>
            </div>
		<h3 ng-hide="sushi.canPurchase">ขายหมดแล้วจ้า</h3>
	</div>
</div>

กรณีที่ canPurchase เป็น True

ผลลัพธ์ดังนี้ Demo True

กรณีที่ canPurchase เป็น False

ผลลัพธ์ดังนี้ Demo False

เพิ่มเติม

Ng-Switch คือ อะไร ?

<ANY ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
<ANY ng-switch-default>...</ANY>

HTML tag ที่มี Directive ตัวนี้อยู่จะแสดงผล เมื่อเงื่อนไขเป็นแบบ Switch Case

Challenge 3: I Want to Buy Maguro!!

ทำการเพิ่มปุ่มสั่งซื้อ และข้อความบอกว่า "ขายหมดแล้วจ้า" ให้กับซูชิ โดยให้ใช้ ng-show และ ng-hide

โดยมีโค้ดให้บางส่วน จงเติมส่วนที่ขาดหายไป เพื่อให้เว็บทำงานได้

กรณีที่ canPurchase เป็น True

ผลลัพธ์ดังนี้ Demo True

กรณีที่ canPurchase เป็น False

ผลลัพธ์ดังนี้ Demo False

ไฟล์ sushistore.html

<!DOCTYPE html>
<html ng-app="application">
<head>
	<meta charset="utf-8">
    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- bootstrap theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
		<header>
      <h1 class="text-center">{{"Tanaka-San"}}'s Sushi Store</h1>
      <h2 class="text-center">Open Since {{10*200}}.</h2>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
				<div class="list-group">
					<div class="list-group-item" ng-controller="storeController as store" >
						<h1>{{sushi.name}}</h1>
						<h2>{{sushi.price}} yen</h2>
						<p>{{sushi.description}}</p>
					</div>
				</div>
            </div>
		</div>
	</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/lib/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="js/lib/bootstrap.min.js"></script>
    <!-- AngularJS JavaScript -->
    <script src="js/lib/angular.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

ไฟล์ app.js

(function () {
	'use strict';
	
	var app = angular.module('application', []);
	app.controller('storeController', function ($scope) {
		$scope.sushi = {
			name: 'Maguro',
			price: 200,
			description: "Fat Tuna"
		};
	});
	
})();