Hi all,
I just started with ionic and now I having a problem and cannot find a way how to fix this. I have a list with items where the user needs to click on one of the two buttons in the item. When clicking for example on button answer A the color should be changed into green. You can ony select one of them. I’ts like a radio buttons only then for button.
My template is:
<ion-list>
<ion-item>
<ion-row>
<ion-col col-4>
<ion-thumbnail>
<img src="image11.jpg">
</ion-thumbnail>
</ion-col>
<ion-col>
<button full ion-button small>Answer A</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
<ion-thumbnail>
<img src="image12.jpg">
</ion-thumbnail>
</ion-col>
<ion-col>
<button full ion-button small>Answer B</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item>
<ion-row>
<ion-col col-4>
<ion-thumbnail>
<img src="image21.jpg">
</ion-thumbnail>
</ion-col>
<ion-col>
<button full ion-button small>Answer A</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
<ion-thumbnail>
<img src="image22.jpg">
</ion-thumbnail>
</ion-col>
<ion-col>
<button full ion-button small>Answer B</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item>
<ion-row>
<ion-col col-4>
<ion-thumbnail>
<img src="image31.jpg">
</ion-thumbnail>
</ion-col>
<ion-col>
<button full ion-button small>Answer A</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
<ion-thumbnail>
<img src="image32.jpg">
</ion-thumbnail>
</ion-col>
<ion-col>
<button full ion-button small>Answer B</button>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
(click)="buttonClicked()" [class.active]="expression"
.selected {
background-color: green;
}
I tried to make an expression based on the output of the buttonClicked function what should select the class in the css. I don’t know if this is the right way to do this but I hope that somebody can help me to push me in the right direction.