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

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

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

?
1
2
3
4
5
6
7
8
9
$scope.sushi = [
    {
        name: 'Makuro',
        price: 200,
        description: "Fat Tuna",
        canPurchase: true,
        image: 'image/sushi/makugo.jpg'
    },...
];

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

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

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

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

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

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

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

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

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

Challenge 6: Add Image

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

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

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

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

สามารถดูผลลัพธ์ได้ที่ Demo

ไฟล์ sushistore.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(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'
            }
        ];
    });
     
})();