CODEWITHSUNDEEP
angularjsionic-framework
Sanjay Tibrewal
Sanjay Tibrewal

Reputation: 135

Create clickable buttons in Ionic v1 card

I have a project in Ionic v1 and I am making some enhancements to it.

I have a list of cards where the card itself is clickable to take the user to more details. I need to add couple buttons on the card but I can't get the clicks to be captured by the button - the click goes to the card href. Sample code below.

    <div class="list card" ng-repeat="(evtKey, evtObj) in someHash">
        <div class="item" ng-click="clickCard(evtKey)">
          <div class="row">
            <div class="col-20 row-center">
                <div> Some stuff here</div>
            </div>
            <div class="col-80 item-text-wrap">
                <div> More stuff here </div>
                    <div class="row text-center">
                        <div class="col col-33">
                            <div> More stuff </div>
                        </div>
                        <div class="col col-33">
                            <button class="button button-small button-stable" ng-click="alert('Yes')">Yes</button>
                        </div>
                        <div class="col col-33">
                            <button class="button button-small button-stable" ng-click="alert('No')">No</button>
                        </div>
                    </div>
                </div>
            </div>
            <p class="item-icon-right"><i class="icon ion-chevron-right icon-accessory"></i></p>
      </div>
  </div>

Looking for help on how to make the click on the button be captured by the button and not by the card. Examples I have found so far are all on doing that with Ionic v2 and later and not for v1.

Thanks,

-S

Upvotes: 0

Views: 321

Answers (1)

Abinesh Joyel
Abinesh Joyel

Reputation: 2093

event.stopPropagation() will stop calling event from parent elements. And also don't put alert in ng-click

<div class="col col-33">
      <button class="button button-small button-stable" type="button" ng-click="somefunc('Yes');$event.stopPropagation();">Yes</button>
</div>
<div class="col col-33">
       <button class="button button-small button-stable" type="button" ng-click="somefunc('No');$event.stopPropagation();">No</button>
 </div>

Upvotes: 1

Related Questions