Ionic 3, <ion-item>, Edit-in-Place


#1

I have a list of ion-items in an ion-list. How do I simply tap on a list item to edit its contents? I would like to make edits to a list-cell without using a Modal Dialog Box. Is this possible?


#2

What exactly do you mean? Some sort of inline editing? Do you have an example of what you’re trying to achieve?


#3

If I could get any of these to work, I’d be thrilled! :slight_smile:


#4

Okay, given the examples this shouldn’t be that hard to create. It’s more angular2 related then Ionic actually. the ion-item just projects content you feed it. So you could just create this ‘inline’ in your ion-item if you want for starters. I think the examples you gave are a pretty good starting point.


#5

What level of begging, groveling, entertainment or money might persuade you to help out with a demo? (Preferably something I could clone from GitHub)


#6

Would I need to simply respond to the ngClick event, within each respective ion-item?

<ion-item class="item-icon-right" 
  ng-repeat="item in items track by $index"
  on-hold="onHold()"
  ng-click="onTap(item)">
  <ion-delete-button class="ion-minus" ng-click="onDelete(item);"></ion-delete-button>
    <p>{{item.text}}</p>
  </ion-item>

#7

Why are you using ng-click and ng-repeat? Which framework are you working in?


#8

I’m using Ionic 3/Angular 4. I’m having trouble figuring out how to make it so that when tap on my ion-item, it gains the ability to be edited (instead of having to use a modal dialog box for editing the contents of my ion-item).


#9

Might want to update your syntax as a first step then.
https://angular.io/docs/ts/latest/guide/structural-directives.html


#10

Aaahhh…did I use an errant example? I actually don’t know where to begin…