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

Filter คือ อะไร ?

ในการแสดงผลข้อมูลต่างๆ จะมีตัว filter เป็นตัวกรองข้อมูล ให้อยู่ในรูปแบบ (format) ที่ต้องการ

โดย Filter ของ AngularJS จะใส่อยู่ใน Expression ต่อจากข้อมูล หรือใน ng-repeat ก็ได้

{{ข้อมูล | filter ที่ใช้}}
ng-repeat="ข้อมูล in Array | filter ที่ใช้"

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

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

Filter มีอะไรบ้าง ?

ในแบบฝึกหัดชุดนี้เราจะกล่าวถึง Filter บางส่วนดังนี้

  • Currency

    - แสดงผลเป็นค่าเงินต่างๆ สามารถกำหนดสัญลักษณ์ได้ (default เป็น $)

    {{10000 | currency}}	    $10,000.00
{{5000.50 | currency:'฿'}}   ฿5,000.50

  • Date

    - แสดงผลเป็นวันเดือนปี โดยสามารถระบุรูปแบบได้

    {{1288323623006 | date}}			Oct 29, 2010
{{1288323623006 | date:'medium'}}		Oct 29, 2010 10:40:23 AM
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}	10/29/2010 @ 10:40AM

  • Number

    - แสดงข้อมูลจำนวนเต็มในรูปแบบ String ระบุจำนวนทศนิยมได้ (default ทศนิยมคือ 3)

    {{1234.56789 | number}}		1,234.568
{{1234.56789 | number:0}}	1,235
{{1234.56789 | number:2}}	1,234.57

  • JSON

    - แสดงข้อมูลในลักษณะของ JSON Object

    {{store.sushi | json}}

  • Lowercase

    - ทำให้ข้อมูลที่แสดงผลเป็นพิมพ์เล็กหมด

    {{"Hello,AngularJS" | lowercase}}	hello,angularjs

  • Uppercase

    - ทำให้ข้อมูลที่แสดงผลเป็นพิมพ์ใหญ่หมด

    {{"Hello,AngularJS" | uppercase}}	HELLO,ANGULARJS

  • limitTo

    - ถ้าใช้กับข้อมูลที่เป็น string จะเป็นการกำหนดจำนวนตัวอักษร

    {{"ABCDEFGHI" | limitTo: 5}}	ABCDE

    - ถ้าใช้กับข้อมูลที่เป็น Array จะเป็นการกำหนดจำนวนที่จะแสดง 

    {{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] | limitTo: 5}}	[1, 2, 3, 4, 5]

    สามารถใช้กับ ng-repeat ได้

    <div ng-repeat="sushi in store.sushi | limitTo:2">

  • orderBy

    - ทำการเรียงข้อมูลใน array สามารถเรียงได้จาก ตัวแปรต่างๆของข้อมูล และแบบย้อนกลับ

    <div ng-repeat="sushi in store.sushi | orderBy:'price'">
<div ng-repeat="sushi in store.sushi | orderBy:'price':'reverse'">

Challenge 5: How's sushi fresh?

คุณทานากะต้องการให้เราแก้ไข 3 ส่วน คือ

ให้ชื่อของเจ้าของร้านเป็นตัวพิมพ์ใหญ่หมด TANAKA-San's Sushi Shop

การแสดงผลเงิน จาก 000 yen เป็น 000.00 yen

ทำการเพิ่มวันที่สินค้าเข้ามาใหม่ เพื่อระบุถึงความสด และแสดงเป็นวันที่บอก

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

Hint: วันที่ต้องเป็น Date Object ให้ใช้ Date()

สามารถดูผลลัพธ์ได้ที่ 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" ng-controller="storeController as store" >
					<div class="list-group-item" ng-repeat="sushi in sushis">
						<h1>{{sushi.name}}</h1>
						<h2>{{sushi.price}} yen</h2>
						<p>[date!!!] - {{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
				....
			},
			{
				name: 'Tamago',
				price: 120,
				description: "Rice With Egg",
				canPurchase: true
				....
			},
			{
				name: 'Ebi',
				price: 150,
				description: "Rice With shrimp",
				canPurchase: true
			},
			{
				name: 'Tamago',
				price: 180,
				description: "Rice With Octopus",
				canPurchase: true
				....
			}
		];
	});
	
})();