Tutorial Ionic Part 4 : Membuat List pada Framework Ionic

lanjut dari postingan sebelumnya, pada artikel kali ini saya akan membahas bagaimana cara Membuat List Menggunakan Ionic. List merupakan komponen yang digunakan untuk menampilkan data dalam bentuk baris. List sering digunakan untuk menampilkan data seperti daftar nama, daftar berita, dan sebagainya. Untuk Membuat List sederhana Menggunakan Ionic menggunakan ionic, cara sangatlah mudah. contohnya seperti berikut :

List Sederhana

Membuat List Menggunakan Ionic + icon
Sama konsepnya dengan menampilkan list sederhana, untuk menampilkan icon disamping list adalah sebagai berikut :

  <ion-content class="padding has-header">

        <ion-list>                  
          <ion-item class="item-icon-left">
            <div class="icon ion-social-android-outline"></div>
            Android
          </ion-item>
          <ion-item class="item-icon-right">
            <div class="icon ion-social-apple-outline"></div>
            IOS
          </ion-item>
          <ion-item class="item-icon-right item-icon-left">
            <div class="icon ion-email"></div>
            <div class="icon ion-chatbox-working"></div>
            Chat
          </ion-item>
        </ion-list>
     </ion-content>

Membuat List Avatar (Gambar)

Dalam membuat list avatar ini ionic framework menyediakan class khusus, jadi tidak perlu ribet dalam membuat list avatar gambar. untuk lebih jelasnya perhatikan contoh berikut :

berikut syntak untuk tampilan list seperti gambar di atas :

      <ion-content class="padding has-header">    
        <ion-list>
          <ion-item class="item item-avatar">
            <img src="img/gb1.jpg">
            contoh list avatar 1
          </ion-item>
           <ion-item class="item item-avatar">
            <img src="img/gb1.jpg">
            contoh list avatar 2
          </ion-item>
           <ion-item class="item item-avatar">
            <img src="img/gb3.jpg">
            contoh list avatar 3
          </ion-item>          
        </ion-list>
     </ion-content>

Selain dengan gambar avatar seperti di atas dapat juga menggunakan gambar dengan bentuk persegi empat, contoh-nya seperti berikut :

<ion-content class="padding has-header">    
      <ion-list>
          <ion-item class="item-thumbnail-left">  
            <img src="img/pemalas.jpg">
            List Thumbnail 1      
          </ion-item>
          <ion-item class="item-thumbnail-left">
            <img src="img/malas.gif">
            List Thumbnail 2
          </ion-item>
          <ion-item class="item-thumbnail-left">
            <img src="img/home.jpg">
            List Thumbnail 3
          </ion-item>
    </ion-list>
</ion-content>

Itulah beberapa cara  Membuat List Menggunakan Ionic, yang bisa diterapkan sesuai dengan kebutuhan dalam pembautan aplikasi.

Berikut saya jelaskan contoh kasus penerapan list dalam aplikasi. misalkan saya memiliki identitas yang terdiri dari nama, alamat. untuk lebih jelasnya buka app.js yang berada pada folder www/js/app.js

angular.module('tutorial', ['ionic'])
.controller('lisCtrl', function($scope){
  $scope.data = [{"nama":"pemalas","alamat":"medan"},{"nama":"malas","alamat":"bekasi"}];
})

untuk file index.html isikan syntax berikut :

  <ion-content class="padding has-header" ng-controller="lisCtrl">
        <ion-list>
          <ion-item ng-repeat="x in data">
            Nama : {{x.nama}}<br/>
            Alamat : {{x.alamat}}
          </ion-item>
        </ion-list>
  </ion-content> 

berikut tampilan dari contoh kasusu sederhana yang saya di atas :