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

ข้อมูลไม่ได้มีเพียงหนึ่งเดียว

จากหัวข้อที่กล่าวมาข้างต้น ข้อมูลโดยปกติแล้วจะมีลักษณะเป็น ชุดข้อมูล (Array)

มันก็เหมือนกับร้านซูชิที่ไม่ได้ขายซูชิแค่ชนิดเดียว

แล้วเราจะทำยังไงกับ Array ?

$scope.sushis = [
	{
		name: 'Maguro',
		price: 200,
		description: 'Fat Tuna'
	},
	{
		name: 'Tamago',
		price: 120,
		description: 'Rice with Egg'	
	},...
];

โดยปกติเราเข้าถึงข้อมูลแบบ Array ได้จากการระบุลำดับ (index) ของข้อมูล

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

แต่มันคงจะต้องเหนื่อยแน่เลยถ้ามันมีสัก 100 รายการ คงเขียนตายเลย

AngularJS จึงได้กำหนด Directive ชื่อ ng-repeat เพื่อใช้กับ Array

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

ng-repeat="ชื่อตัวแปรที่จะเรียก in ตัวแปร Array"

Ng-Repeat ใช้สำหรับการแสดงชุดข้อมูล โดยใส่ Directive ไว้ที่ HTML tag ที่เป็น Parent node ของส่วนที่เราต้องการแสดงผลแบบ Array ดังนี้

<div class="list-group" ng-controller="storeController as store">
					<!--ng-repeat="ชื่อตัวแปรที่จะเรียก in ตัวแปร Array"-->
	<div class="list-group-item" ng-repeat="sushi in sushis">
		<h1>{{sushi.name}}</h1>
		<h2>{{sushi.price}} yen</h2>
		<p>{{sushi.description}}</p>
		<button class="btn btn-default" ng-show="sushi.canPurchase">สั่งซื้อ</button>
		<h3 ng-hide="sushi.canPurchase">ขายหมดแล้วจ้า</h3>
	</div>
</div>

หากต้องการดูตัวอย่างให้เข้าลิงนี้ Demo

Challenge 4: More Sushi!!

คุณทานากะต้องการให้เราเพิ่มเมนูใหม่เข้าไป ซึ่งประกอบไปด้วย

  • Tamago - ข้าวปั้นหน้าไข่ ราคา 120 yen
  • Ebi - ข้าวปั้นหน้ากุ้ง ราคา 150 yen
  • Tako - ข้าวปั้นหน้าปลาหมึก ราคา 180 yen

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

สามารถดูหน้าเว็บตัวอย่างได้ที่ Demo

ไฟล์ 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>
						<button class="btn btn-default" ng-show="sushi.canPurchase">สั่งซื้อ</button>
						<h3 ng-hide="sushi.canPurchase">ขายหมดแล้วจ้า</h3>
					</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",
			canPurchase: true
		}];
	});
	
})();