AngularJS : Lesson 6

ในการแสดงผลรูปนั้นไม่สามารถใช้ src ได้

เนื่องจากหากเราเอา url ของรูปเก็บไว้ใน AngularJS

$scope.sushi = [
	{
		name: 'Makuro',
		price: 200,
		description: "Fat Tuna",
		canPurchase: true,
		image: 'image/sushi/makugo.jpg'
	},...
];

เมื่อเรียกใช้งานบนหน้า html url ดังกล่าวไม่มีค่า

เนื่องจาก HTML จะพยายามโหลด url ก่อนทำการใส่ค่าของ AngularJS

ตัวอย่างที่ผิด

<img src="{{sushi.image}}" />

รู้จักกับ Ng-Src

Ng-src เป็น Directive ที่ไว้ใช้โหลดรูปภาพบนเว็บที่เป็น AngularJS

เนื่องจาก src ไม่สามารถเรียกข้อมูลของ AngularJS ออกมาแสดงได้

<img ng-src="{{sushi.image}}" />

ตัวอย่างการใช้งาน ng-src ดูได้ที่ลิงค์นี้ Demo

คุณทานากะต้องการให้เราใส่รูปภาพให้กับซูชิแต่ละจาน

โดยรูปทั้งหมดนั้นจะถูกเก็บอยู่ใน tutorial/image/sushi/

สามารถโหลดได้ที่ Sushi Image

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

สามารถดูผลลัพธ์ได้ที่ 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" | uppercase}}{{"-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" ng-controller="storeController as store" >
					<div class="list-group-item" ng-repeat="sushi in store.sushi">
						<h1>{{sushi.name}}
							<em class="pull-right">{{sushi.price | number:2}} yen</em>
						</h1>
						
						<p>{{sushi.freshDate | date}} - {{sushi.description}}</p>
						<button 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,
				freshDate: new Date('2014-04-15'),
				image: 'image/sushi/maguro.jpg'
				
			},
			{
				name: 'Tamago',
				price: 120,
				description: "Rice With Egg",
				canPurchase: true,
				freshDate: new Date('2014-04-05'),
				image: 'image/sushi/tamago.jpg'
			},
			{
				name: 'Ebi',
				price: 150,
				description: "Rice With shrimp",
				canPurchase: true,
				freshDate: new Date('2014/04/12'),
				image: 'image/sushi/ebi.jpg'
			},
			{
				name: 'Tako',
				price: 180,
				description: "Rice With Octopus",
				canPurchase: true,
				freshDate: new Date('2014-04-08'),
				image: 'image/sushi/tako.jpg'
			}
		];
	});
	
})();

ย้อนกลับ

Lesson 6: การใช้งานรูปใน AngularJS

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