Hello Readers,
In this blog we will learn about ionic module's  directive ion-list and ionItem.
Basically, lists are widely used in web application and mobile application. List contains items so both can be HTML element. Every list requires a list class and list items requires a item class.

Here is the full example to understand the functionality:
index.html

<ion-view view-title="ionList Directive">
    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat="item in items">
                <p>item no. {{item}}</p>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

contorller.js

   $scope.items = [];
   for (var i = 0; i < 10; i++)
   {
      $scope.items.push(i);
   }

There are some advance features of ionList and ionItem. These are child of ionItem.
 

1. ion-option-button:  The option button can be created inside an item. When user swipe the item left an option button will show and it will hide when user swipe right.

Example:

index.html

<ion-view view-title="ionList Directive">
    <ion-content class="has-header">
        <ion-list can-swipe="canSwipe">
            <ion-item ng-repeat="item in items">
                <p>item no. {{item}}</p>

                <ion-option-button class="button-positive" ng-click="share(item)">
                    Share
                </ion-option-button>

                <ion-option-button class="button-info" ng-click="edit(item)">
                    Edit
                </ion-option-button>
           </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

controller.js

    $scope.items = [];
    for (var i = 0; i < 10; i++) 
    {
        $scope.items.push(i);
    }
    $scope.canSwipe = true

2. ion-delete-button:  We can delete any list item with using this directive.

Example:

index.html

<ion-view view-title="ionList Directive">
    <ion-content class="has-header">
        <ion-list show-delete="showDelete">
            <ion-item ng-repeat="item in items">
                <p>item no. {{item}}</p>
                <ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)">
                </ion-delete-button>
           </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

controller.js

    $scope.items = [];
    for (var i = 0; i < 10; i++) 
    {
        $scope.items.push(i);
    }
    $scope.showDelete = true;

3. ion-reorder-button: We can reorder list items with using this directive.

Example:

<ion-view view-title="ionList Directive">
    <ion-content class="has-header">
        <ion-list show-reorder="showReorder">
            <ion-item ng-repeat="item in items">
                <p>item no. {{item}}</p>
                <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item,
                 $fromIndex, $toIndex)">
                </ion-reorder-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

controller.js

    $scope.items = [];
    for (var i = 0; i < 10; i++) 
    {
        $scope.items.push(i);
    }
    $scope.showReorder = true;
    $scope.reorderItem = function(item, fromIndex, toIndex) {
        //Move the item in the array
        $scope.items.splice(fromIndex, 1);
        $scope.items.splice(toIndex, 0, item);
    };

Hope this will help you. :)