PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

14 September 2014 By
list collection ionic

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



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








เนื้อหาที่เกี่ยวข้อง



Tags:: ionic collection list




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง