Develop Reference

How to implement swiping ion-items in Ionic without clicking?

I am trying to implement an ion-list with ion-items that are swipable but don't have to be clicked on the side to trigger an event.
It should work like like the default contacts app on Samsung phones, where you can either swipe left to call or right to send a SMS.
The list in the parent page looks like this:
<ion-list *ngFor="let person of persons | filter:searchTerm">
<app-person-entry [person]="person" (click)="openModal(person)"></app-person-entry>
</ion-list>
The person-entry component looks like this:
<ion-item>
<ion-avatar slot="start">
<img src={{person.icon}}>
</ion-avatar>
<div>
<div class="container">
<ion-label>{{person.lastname}}</ion-label>
<ion-label>{{person.firstname}}</ion-label>
</div>
<div class="container">
<ion-label>{{person.postalCode}}</ion-label>
<ion-label>{{person.city}}</ion-label>
<ion-label>{{person.address}}</ion-label>
</div>
</div>
</ion-item>

you can use ion-item-sliding.
e.g:
<ion-list>
<ion-item-group #myItemsId>
<ion-item-sliding (ionSwipe)="swipeEvent($event, myItemsId)">
<ion-item-options side="start">
<ion-item-option>CALL</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Item Options</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option>SMS</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
.ts:
swipeEvent($event, item) {
console.log($event)
if ($event.detail.side == 'start') {
console.log('call now');
this.closeAllItems(item)
} else {
console.log('SMS now');
this.closeAllItems(item)
}
}
closeAllItems(item) {
let a = Array.prototype.slice.call(item.el.children)
a.map((val) => {
val.close();
})
}

It is impossible to catch scroll event in ionic 3

I want to catch scrolling event of list component in ionic3 as in this example:
<ion-content on-scroll = "scrolling()" on-scroll-complete = "scrollComplete()">
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Item {{ item.id }}
</ion-item>
</ion-list>
</ion-content>
https://codepen.io/etipirev/pen/aNYNpy?editors=1111
as it is seemed it is working in ionic 1, but not in ionic 3? i havent found any event description in ionic docs. is it possible to catch scrolling of list items in ionic 3?

The syntax is different in Ionic2/3. Here's how it should be:
<ion-content (ionScroll)="scrolling($event)" (ionScrollEnd)="scrollComplete($event)">
<ion-list>
...
</ion-list>
</ion-content>
then in your ts file
constructor(){}
scrolling(event) {
// your content here for scrolling
}
scrollComplete(event) {
// your content here of scroll is finished
}
}

Ionic Cordova: Angualarjs double binding is not working

I am developing a hybrid application by using Ionic Framework. However, my application failed in double binding when user back to hybrid application. The application able to retrieve Array Object from localstorage but my ngrepeats failed to load the var I assigned from localstorage. The following is my code.
controller.js
.controller('ChatsCtrl', ['$scope','$state', '$ionicTabsDelegate' , '$ionicListDelegate', '$rootScope'
,function($scope,$state,$ionicTabsDelegate, $ionicListDelegate, $rootScope) {
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = channel_list;
}])
HTML File
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom({{'chat.displayName'}}, {{'chat.channelID'}})">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

Try calling a function on page load that re initialize your list something like this,
Controller.js
$scope.init = function(){
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
}
$scope.init();
And make sure when ever you visit this page this function is fired.
Note: if you are on the same page and wants to rebind the list then call this function in your goBack() or goForward() function where ever required.
Hope this solves your problem.

JS
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
HTML file
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom(chat.displayName,chat.channelID)">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
ng-click="chatRoom(chat.displayName,chat.channelID) Pass value like this.

Delete item from list Ionic

I'm building an ionic to do list app.
I'm working on a delete function where you click the delete button and it will delete the list item, but have I'm having problems and can't figure it out.
the delete button shows, but when you click it nothing happens.
HTML:
<ion-view view-title="To-Do">
<ion-content class="padding">
<!-- http://ionicframework.com/docs/components/#bar-inputs -->
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon placeholder-icon"></i>
<input type="text" ng-model="item.name" placeholder="Enter Task Here">
</label>
<button class="button ion-ios-plus-outline" ng-click="addItem(item)">
</button>
</div>
<ion-list>
<ion-item class="item-remove-animate" ng-repeat="item in items" >
<h3>{{item.name}}</h3>
<ion-option-button class="button-assertive ion-trash-a" ng-click="remove($index)"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Controller:
.controller('ShortTermCtrl', function($scope, Task) {
$scope.data = Task.data;
$scope.items = [];
$scope.item = {};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {name: ""};
};
$scope.removeItem = function(index){
$scope.items.splice(index, 1);
};
})

You use the wrong function name in view. Change it from remove to removeItem:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem($index)"></ion-option-button>

for ng-repeat use
ng-repeat='(index, item) in items'
to keep track of the index of every item, and pass the index to the remove function
ng-click="removeItem({{index}})"

As per your codexample, you commented out the remove(task) function, you need to target the removeItem(index) function in your HTML
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(1)">
Instead of a static index number, provide the items/index itself to a generic function, then delete that array item, like so:
$scope.removeItem = function(items, index){
items.splice(index, 1);
};
Your HTML will look like so:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(items, $index)">
The $index is automatically exposed to your ng-repeat scope among other useful properties, you can read more in the docs of ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat

Why is my view showing information only the first time?

I have simple app with a menu on the left with just two options:
When I click on the "Servicios" option I'm loading some categories from my Parse application:
Then, if I click on the "Tablero" option and then again try to go back to "Servicios" option by clicking on the menu, the data doesn't load:
This is my controller:
.controller('ServicesCtrl', function($scope, $state) {
$scope.categories = {};
// Categories
var Category = Parse.Object.extend("Category");
var query = new Parse.Query(Category);
query.equalTo("isActive", true);
query.ascending("name");
query.find({
success: function(categories) {
$scope.categories = categories;
}
});
})
And this is my view:
<ion-view class="services-view" cache-view="false">
<ion-nav-title>
<span>Servicios</span>
</ion-nav-title>
<ion-content>
<ion-list class="list">
<ion-item ng-repeat="category in categories" class="item item-thumbnail-left">
<img src="img/cut.svg">
<h2>
{{ category.get("name") }}
</h2>
<p>
</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Do I need to do some extra work for loading again?