PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

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








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



Tags:: collection ionic list




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

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


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



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


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