Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • ion-list directive in ionic module

    @nanda.puri
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 914
    Comment on it

    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

    1. <ion-view view-title="ionList Directive">
    2.     <ion-content class="has-header">
    3.         <ion-list>
    4.             <ion-item ng-repeat="item in items">
    5.                 <p>item no. {{item}}</p>
    6.             </ion-item>
    7.         </ion-list>
    8.     </ion-content>
    9. </ion-view>

     

    contorller.js

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

    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

    1. <ion-view view-title="ionList Directive">
    2.     <ion-content class="has-header">
    3.         <ion-list can-swipe="canSwipe">
    4.             <ion-item ng-repeat="item in items">
    5.                 <p>item no. {{item}}</p>
    6.  
    7.                 <ion-option-button class="button-positive" ng-click="share(item)">
    8.                     Share
    9.                 </ion-option-button>
    10.  
    11.                 <ion-option-button class="button-info" ng-click="edit(item)">
    12.                     Edit
    13.                 </ion-option-button>
    14.            </ion-item>
    15.         </ion-list>
    16.     </ion-content>
    17. </ion-view>

     

    controller.js

    1.     $scope.items = [];
    2.     for (var i = 0; i < 10; i++) 
    3.     {
    4.         $scope.items.push(i);
    5.     }
    6.     $scope.canSwipe = true

     

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

    Example:

    index.html

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


    controller.js

    1.     $scope.items = [];
    2.     for (var i = 0; i < 10; i++) 
    3.     {
    4.         $scope.items.push(i);
    5.     }
    6.     $scope.showDelete = true;

     

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

    Example:

    1. <ion-view view-title="ionList Directive">
    2.     <ion-content class="has-header">
    3.         <ion-list show-reorder="showReorder">
    4.             <ion-item ng-repeat="item in items">
    5.                 <p>item no. {{item}}</p>
    6.                 <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item,
    7.                  $fromIndex, $toIndex)">
    8.                 </ion-reorder-button>
    9.             </ion-item>
    10.         </ion-list>
    11.     </ion-content>
    12. </ion-view>

     

    controller.js

    1.     $scope.items = [];
    2.     for (var i = 0; i < 10; i++) 
    3.     {
    4.         $scope.items.push(i);
    5.     }
    6.     $scope.showReorder = true;
    7.     $scope.reorderItem = function(item, fromIndex, toIndex) {
    8.         //Move the item in the array
    9.         $scope.items.splice(fromIndex, 1);
    10.         $scope.items.splice(toIndex, 0, item);
    11.     };

    Hope this will help you. :)

    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: