Question

所以我有以下观点：

<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>

哪个效果很好。我有一个单选按钮，无论我在这一行中单击，单选按钮都会选择/取消选择。

但我希望让用户有可能改变体重和重复。我想在右侧添加一个按钮，用户可以在其中单击并更改内容。但是，该按钮不可点击。即使我点击按钮，单选按钮也会选择/取消选择，而不是按“按钮”。

如何制作此行，以便像单选按钮的效果一样停止＆＃34;按钮前面？按钮是否可点击？

感谢您的帮助！

Answer 1

您需要停止父点击的传播。把你的按钮放在这个

<button class="button button-positive" ng-click="alert('fuuu'); $event.stopPropagation();">
   <i class="icon ion-ios-telephone"></i>
</button>

Answer 2

你可以尝试：

    <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 clickme" alt="red"> click me
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                        <input type='radio' id ="red" name="hello"/>

                        <button class="button button-positive clickme" alt="green"> click me
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                        <input type='radio' id ="green" name="hello"/>

                        </ion-item>

            </ul>

        <button class="button button-full button-positive" id="finisherButton" disabled="true" >
                 </button>

    </ion-content>
</ion-view>

2：你的java脚本代码就像。我正在使用jquery，请确认链接：https://jsfiddle.net/gynz82tg/1/。可能它会帮助你。

  $(document).ready(function(){
  $('.clickme').click(function(){
       var attr = $(this).attr('alt');

       $('#'+attr).click();
  });

 })

使用单选按钮时可以使按钮可单击

2 个答案: