เนื้อหาตอนนี้ จะมาแนะนำวิธีการใช้งาน 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 สำหรับข้อมูลทพสอบ
1 2 3 4 5 6 7 | 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)"
1 2 3 | $scope.getItemHeight = function(item, index) { return (index % 2) === 0 ? 50 : 60;}; |
3. ลิสรายการที่ render จะมีการกำหนด position เป็น absolute ดังนั้นการแสดงผล
เราอาจะจำเป็น ต้องมีการกำหนด css style เข้าไปเพิ่มเติม ด้วย
1 | ng-style="{width:'100%',height:'50px'}" |
4. ถ้ามีลิสรายการ ที่ใช้งาน collection-repeat มากกว่า 1 ลิส ลิสรายการนั้นๆ จำเป็น
จะต้องมี ionScroll container.(<ion-scroll> ) คลุมเพื่อใช้งานก่อนเสมอ เนื่องจาก collection-repeat
จะอ้างอิงและใช้งานพื้นที่ทั้งหมดในส่วนของ scrollview นั้นทั้งหมด
ตัวอย่าง
ตัวอย่างโค้ด ที่มีงาน ion-scroll เมื่อมีการใช้งาน collection-repeat มากกว่า 1 ลิส
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 44 45 46 47 | <!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) อ้างอิงจากโค้ดด้านบน
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 | <!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 เป้นค่าที่ขึ้นกับข้อมูล
และรูปแบบการแสดง เราต้องทำการปรับให้เหมาะสมตามแต่เนื้อหา ดังนั้นค่าดังกล่าว จึง
ไม่ใช่ค่าที่ตายตัว
เนื้อหาที่เกี่ยวข้อง