การใช้งาน list กับ collection repeat ใน ionicframework ตอนที่ 7

14 September 2014 เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee

ionic collection list

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionic collection list

เนื้อหาตอนนี้ จะมาแนะนำวิธีการใช้งาน 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ