Recently, I developed a view that showcases the following code:
<ion-view view-title="Training Detail">
<ion-content class="padding">
<ul class="list">
<ion-item class="item item-checkbox item-button-right" ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise" on>
<label class="checkbox">
<input type="checkbox" ng-click="didExercise(exercise.exerciseID)" >
</label>
<p><h2>{{exercise.exerciseName}}</h2></p>
<p>{{exercise.repetition}} <b ng-if="exercise.diaryRepetition.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryRepetition}}</i></b></p>
<p>{{exercise.weight}} <b ng-if="exercise.diaryWeight.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryWeight}}</i></b></p>
<button class="button button-positive" onclick="alert('fuuu')">
<i class="icon ion-ios-telephone"></i>
</button>
</ion-item>
</ul>
<button class="button button-full button-positive" id="finisherButton" disabled="true" >
{{getButtonString()}}
</button>
</ion-content>
</ion-view>
The functionality is working smoothly. One feature includes a radio button that activates upon clicking within the row.
Now, I want to allow users to modify weight and repetition values by adding a clickable button on the right side of each row. Unfortunately, this button does not respond when clicked as intended. Instead, the radio button toggles its selection state.
How can I adjust the row so that the influence of the radio button ends just before reaching the button, allowing it to be clicked independently?
Your advice is greatly appreciated!