Ionic Creator: List Item Buttons Delete, Reorder, and Swipe
1) Create a new project
Project Name: List Item Buttons
Template: Blank.
2) Add List Item Component
Drag List Item component to the Main Window.
List Item in the Page Container.
3) Add Controller Codes
Click the Page item in the Code Navigator Window.
Add codes to the Page function.
// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
//hide buttons during startup
$scope.showDelete=false;
$scope.showReorder=false;
//toggle hide and show buttons
$scope.toggle=function(v){
$scope[v]=!$scope[v];
}
//delete task
$scope.delete=function(item){
$scope.items.splice($scope.items.indexOf(item),1);
}
//reorder task
$scope.reorder=function(item,fromIndex,toIndex){
$scope.items.splice(fromIndex,1);
$scope.items.splice(toIndex,0,item);
}
//populate list
$scope.items=[
{
id:'1'
},
{
id:'2'
},
{
id:'3'
},
{
id:'4'
},
{
id:'5'
}
]
}
|
4) Add Directives To List Item Component
Select List Item.
Enter Directive Values.
Outcome.
5) Preview
Click the Preview Button.
Outcome.
6) Add Header Buttons
(Delete and Reorder Buttons)
Select The Page
Enable the buttons.
Set ion-ios-minus icon for Left Button.
Set text “Reorder” for Right Button.
Preview.
7) Add Directives To Page
(This is to provide the toggle functionality to the Header Buttons ie when the user click the buttons on the Header, the showDelete or showReorder function codes in Step 3 will be called )
Select The Page
Enter Directives Values
ng-click
|
toggle('showDelete')
|
ng-click
|
toggle('showReorder')
|
Bind the directives to the Button Codes.
Click the bind button.
Click the pointed line.
Delete Button.
Reorder Button.
Preview.
Preview.
8) Add Directives To List
(This is to provide the toggle functionality to the List ie when the user click the buttons on the list, the showDelete or showReorder function codes in Step 3 will be called)
Select the List.
Enter Directive values.
9) Add Directives To List Item
(This is to provide the Delete or Reorder functionality to the list item ie when the user click the buttons on a list item, the delete or reorder task will be applied to that item)
Select List Item.
Enter Directive Values.
ng-click
|
delete(item)
|
on-reorder
|
reorder(item,$fromIndex,$toIndex)
|
Bind the Directives to the List Item codes
Click the Bind Button.
Click the highlighted codes line.
Delete Button for List Item.
Reorder Button for List Item
10) Test Run
Delete Item 2.
Reposition Item 1.
