Ionic List Item with ng-click and option-buttons

1

Hello,

When using Ionic List Item with ng-click and option-button, when you click on the option button the ng-click for the option button and the list item itself both fire. Is there a way around that?

  <ion-item class="item" ng-repeat="radio in genrelist" ng-click="radio_link()">
    {{radio.name}} 
       <ion-option-button class="button-positive" ng-if="radio.option_addToPlaylist" ng-click="addToPlaylist()">Add to Playlist</ion-option-button>

  </ion-item>

So when I click on the option item , both radio_link() and addToPlaylist() fire and I only wanted the option button to fire.

Any ideas?

3 Likes
2

What version of ionic are you using?
I wasnā€™t able to recreate it in the nightlies.

3

@mhartington
I am using 1.2.8 but still it behaves same .

I think in your case when you are enabling icon click you disabled the item click. What if both are enabled ??
Can u plz help me to resolve this issue??

4

@elmezie

Did you solved this issue ??

5

1.2.8 is the version number for the CLI, not ionic.

Not sure what you are talking about, not disabling/enabling anything.

6

I am saying that when you click button from header and enable the delete for the list items, you cant click on your list item that is disabled, bcoz that disables the click on items. But if both things are enable you can see this issue.

7

Ahh alright, I understand now.

Should be able to do this.

.list-left-editing .item{
pointer-events: initial;
}

1 Like
8

@mhartington I have added the css you mentioned to style.css, however I still face the issue that both the ng-click of the list element AND the ng-click of the button fireā€¦
Any ideas?

9

Can you provide a codepen? The example works for me so it must be something else.

10

@mhartington Thanks for helpingā€¦ Here the codepen: http://codepen.io/anon/pen/XJNRZr

11

@pits Any solution? I have a similar problem if I use a <ion-item> with ā€˜ng-clickā€™ and a <ion-option-button> in it with a ng-click action. If I click on the ion-option-button the action form the io-item is executed.
I use the Ionic 1.0.0-beta14

12

OK the problem occurs if you have an ng-if on you ion-option-button. With ng-show it works.

4 Likes
13

Remove ng-if condition from ion-option-button,
Introduce new span tag for make ng-if conditions, Inside span you can user ion-option-button.

14

This is still happening, if the ion-option-button has an ng-if statement inside, itā€™ll trigger the ng-click from the option and the ng-click from the ion-item. Is there a fix to this other than the ng-show.

EDIT: IF ANYONE HAS A PROBLEM WITH THIS!!

I used ion-stop-event=ā€œclickā€. This will cancel event propagation.

1 Like
15

Hi, i was wondering if ion-select supports click function. I did my research but i ran out of luckā€¦
For an example, i need to create a function using ion-option, so when there is a particular option that is selected, it will prompt another ion-optionā€¦

or should i use ngIf? cause i have a condition that under my second ion-option

if options.type == "late"

it will prompt another ion-option and display what is reasons of being late

Like

<ion-select cancelText="Cancel" class="select-option" [selectOptions]="selectOptions" [(ngModel)]="defaultOptions">
  <ion-option value="default" selected="true">{{p.attendanceType}}</ion-option>
  <ion-option ion-item *ngFor="let options of attendanceOptions" > {{options.type}}</ion-option>
</ion-select>