การใช้งาน list กับ collection repeat ใน ionicframework ตอนที่ 7
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeeionic collection list
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionic collection list
ไปที่
Copy
เนื้อหาตอนนี้ จะมาแนะนำวิธีการใช้งาน 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 เป้นค่าที่ขึ้นกับข้อมูล
และรูปแบบการแสดง เราต้องทำการปรับให้เหมาะสมตามแต่เนื้อหา ดังนั้นค่าดังกล่าว จึง
ไม่ใช่ค่าที่ตายตัว
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง
-
15 Sep2014การใช้งาน slide box ใน ionicframework อย่างง่าย ตอนที่ 8 อ่าน 6,199
slide box ใน ionicframework เป็นยังไง สามารถดูได้ที่ http://ionicframewor
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()