เนื้อหาตอนนี้ จะมาแนะนำวิธีการใช้งาน list ใน ionicframework กับรายการข้อมูล
จำนวนมาก ตัวอย่างและโค้ดเป็นแนงทางอย่างง่าย เพื่อให้เข้าใจหลักการใช้งาน
จะเน้นการใช้งาน list กับ collection-repeat
ปกติในการวนลูปแสดงข้อมูลด้วย list เราจะใช้ ng-repeat ซึ่งเป็น directive ของ angular
สำหรับแสดงข้อมูล ซึ่งเหมาะกับจำนวนรายการข้อมูลไม่มากนัก แต่ถ้าข้อมูลมีเป็นจำนวนมาก
เป็นหลักร้อยหรือหลักพันขึ้นไป การ render หน้า app ก็จะทำให้เครืองใช้ memory มากขึ้นด้วย
สำหรับ ionicframework มี collection-repeat directive มาให้
ช่วยให้การวนลูปแสดงข้อมูล มีการดึงข้อมูลมาแสดงเฉพาะรายการที่สามารถแสดงได้ในหนึ่งหน้าเท่านั้น
และข้อมูลจะค่อยๆถูกโหลดมาแสดงเมื่อเลื่อน scroll bar ลงไปเรื่อยๆ จนกว่าข้อมูลจะแสดงครบ
เช่น มีรายการ 1000 รายการ ในหนึ่งหน้าจะแสดงข้อมูลได้ 10 รายการ เมื่อเราค่อยๆ เลื่อน scroll bar
ลงมาเรื่อยๆ รายการในลำดับ ที่ 11 12 13..... ก็จะแสดงขึ้นมา โดยไม่ได้เป็นการโหลดมาเก็บไว้
ตั้งแต่แรกเหมือนการใช้งาน ng-repeat
ไฟล์ app.js สำหรับข้อมูลทพสอบ
angular.module("MyApp", ["ionic"])
.controller("myIonicHome",function($scope){
$scope.data = [];
for(var i=0;i<1000;i++){
$scope.data[i] = "Data "+(i+1);
}
});
อย่างไรก็ตาม การใช้งาน collection-repeat directive จำเป็นต้องมีการกำหนดค่าเพิ่มเติม เช่น
ความกว้าง ความสูง หรือแม้แต่การเพิ่ม css style เพื่อให้การแสดงผลเป็นไปอย่างถูกต้อง
สิ่งที่ต้องรู้ ในการใช้งาน collection-repeat
1. ข้อมูลที่ใช้ในการวนลูป ต้องเป็นประเภท array
2. ต้องกำหนดความกว้าง และความสูงของ directive โดยใช้งาน
collection-item-width="'100%'" และ collection-item-height="50"
สามารถกำหนด ได้ทั้ง เป็น percent หรือ pixels หรือจะใช้งานฟังก์ชั่นก็ได้
เช่น collection-item-height="getItemHeight(item, $index)"
$scope.getItemHeight = function(item, index) {
return (index % 2) === 0 ? 50 : 60;
};
3. ลิสรายการที่ render จะมีการกำหนด position เป็น absolute ดังนั้นการแสดงผล
เราอาจะจำเป็น ต้องมีการกำหนด css style เข้าไปเพิ่มเติม ด้วย
ng-style="{width:'100%',height:'50px'}"
4. ถ้ามีลิสรายการ ที่ใช้งาน collection-repeat มากกว่า 1 ลิส ลิสรายการนั้นๆ จำเป็น
จะต้องมี ionScroll container.(<ion-scroll> ) คลุมเพื่อใช้งานก่อนเสมอ เนื่องจาก collection-repeat
จะอ้างอิงและใช้งานพื้นที่ทั้งหมดในส่วนของ scrollview นั้นทั้งหมด
ตัวอย่าง
ตัวอย่างโค้ด ที่มีงาน ion-scroll เมื่อมีการใช้งาน collection-repeat มากกว่า 1 ลิส
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>My App</title>
</head>
<body ng-controller="myIonicHome">
<ion-header-bar class="bar-positive">
<h1 class="title">My List!</h1>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<ion-scroll style="height:200px;">
<ion-list>
<ion-item
collection-repeat="item in data"
collection-item-width="'100%'"
collection-item-height="49"
ng-style="{width:'100%'}"
>
Hello, {{item}}!
</ion-item>
</ion-list>
</ion-scroll>
<br><br>
<ion-scroll style="height:200px;">
<ion-list>
<ion-item
collection-repeat="item in data"
collection-item-width="'100%'"
collection-item-height="49"
ng-style="{width:'100%'}"
>
Hello, {{item}}!
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>
</body>
</html>
5. ไม่สามารถใช้งาน ng-show หรือ ng-hide กับ ion-content หรือ ion-scroll ที่ใช้งาน
collection-repeat ได้ เนื่องจาก จะมีผลกับการกำหนดความกว้าง ความสูงของลิสรายการ
ตัวอย่างการใช้งาน collection-repeat
โค้ดตัวอย่าง index.html (ไฟล์ app.js) อ้างอิงจากโค้ดด้านบน
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>My App</title>
</head>
<body ng-controller="myIonicHome">
<ion-header-bar class="bar-positive">
<h1 class="title">My List!</h1>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<ion-list>
<ion-item
collection-repeat="item in data"
collection-item-width="'100%'"
collection-item-height="49"
ng-style="{width:'100%'}"
>
Hello, {{item}}!
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
ก่อนจบ ขอย้ำว่า ค่าตัวเลข ความกว้างความสูง เช่น 100% หรือ 49 เป้นค่าที่ขึ้นกับข้อมูล
และรูปแบบการแสดง เราต้องทำการปรับให้เหมาะสมตามแต่เนื้อหา ดังนั้นค่าดังกล่าว จึง
ไม่ใช่ค่าที่ตายตัว
เนื้อหาที่เกี่ยวข้อง