WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Javascript List


Using List

The directives used for displaying lists and items are ion-list and ion-item as shown below.

<ion-list>
   <ion-item>
      Item 1 
   </ion-item>
	
   <ion-item>
      Item 2 
   </ion-item>
	
   <ion-item>
      Item 3  
   </ion-item>
</ion-list>

The above code will produce the following screen −

Ionic List

Delete Button

This button are often another by mistreatment the ion-delete-button directive. you'll be able to use any icon category you wish. Since we have a tendency to don't invariably wish to point out the delete buttons, as a result of users would possibly accidentally faucet it and trigger the delete method, we are able to add the show-delete attribute to the ion-list and connect it with the ng-model.

In the following example, we will use the ion-toggle as a model. When the toggle is on delete, the buttons will appear on our list items.

<ion-list show-delete = "showDelete1">
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 1
   </ion-item>
	
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 2
   </ion-item>
</ion-list>

<ion-toggle ng-model = "showDelete2">
   Show Delete 2
</ion-toggle>

The above code will produce the following screen −

Ionic List Delete Button

Reorder Button

The Ionic directive for the reorder button is ion-reorder-button. The element we created has an on-reorder attribute that will trigger the function from our controller whenever the user is dragging this element.

<ion-list show-reorder = "true">
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon" 
         on-reorder = "moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
   </ion-item>
</ion-list>

$scope.items = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4}
];

$scope.moveItem = function(item, fromIndex, toIndex) {
   $scope.items.splice(fromIndex, 1);
   $scope.items.splice(toIndex, 0, item);
};

The above code will produce the following screen −

Ionic List Reorder 1

When we click the icon on the right, we can drag the element and move it to some other place in the list.

Ionic List Reorder 2

Option Button

The Option button is made exploitation associate ion-option-button directive. These buttons ar showed once the list item is swiped to the left and that we will hide it once more by swiping the item part to the proper.

You can see within the following example that there are 2 buttons, that are hidden.

<ion-list>
   <ion-item>
      Item with two buttons...
      <ion-option-button class = "button-positive">Button 1</ion-option-button>
      <ion-option-button class = "button-assertive">Button 2</ion-option-button>
   </ion-item>
</ion-list>

The above code will produce the following screen −

Ionic List Option Hidden

When we swipe the item element to the left, the text will be moved left and buttons will appear on the right side.

Ionic List Option Visible

Welookups is optimized for learning.Copy right 2018 - 2019 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com