Ionic - Set On-Swipe-Right on a checkbox in a list

Question

I have a view that consists of a list of names that can be toggle 'on' and 'off' using a check box component.

This view looks like the following: Ionic Screenshot

This works great, but I need a way for the user to be able to delete one of the list items as well. I imagined doing this with a swipe-right and updated my markup to be the following:

<ion-view view-title="Home" hide-nav-bar="true">
  <ion-content class="padding">
    <label class="item item-input">
      <input type="text" placeholder="Enter Name" ng-model="model.name">
    </label>
    <button class="ion-plus-circled button-block btn-primary button" ng-click="add(model.name)" side="right">
       Add Name
    </button>
    <ion-list type="card" can-swipe="true">
      <ion-checkbox ng-repeat="participant in participants"
                      ng-model="participant.include" 
                      ng-change="participantIncludeChanged(participant.id)"
                      ng-checked="participant.include"
                      on-swipe-right="onSwipeRight(participant.id)">
          <p>{{ participant.name }}</p>
        </ion-checkbox>
    </ion-list>
  </ion-content>
</ion-view>

You will notice the on-swipe-right attribute on the ion-checkbox element. I would think this still works, but It does not hit the event handler (which currently just alerts the id)

How can I get the on-swipe-right handler to hit?

Feel free to comment on a better way of accomplishing this as well if anything comes to mind.

Thanks ahead of time!

Community · Accepted Answer · 2017-05-23 12:05:53Z

0

This is most likely, ng-repeat create a child scope for each item in the loop.

Try accessing parent scope inside the loop. $parent.onSwipeRight(participant.id)

<ion-checkbox ng-repeat="participant in participants" ng-model="participant.include" ng-change="participantIncludeChanged(participant.id)" ng-checked="participant.include" on-swipe-right="$parent.onSwipeRight(participant.id)"> <p>{{ participant.name }}</p> </ion-checkbox> Following link will also help you

ng-click doesnt work inside ng-repeat

HTH

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered May 25, 2015 at 22:45

sameera207

16.6k20 gold badges93 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic - Set On-Swipe-Right on a checkbox in a list

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related