AngularJS - Button click contained in grid with ng-click event

Question

.html

<div class="col col-50"
    ng-repeat="col in row"
    ng-click="openProductDetails(col.prod_id);">
    <button 
        ng-click="addToCart(col.prod_id);">
        Add to cart
    </button>
</div>

As you can see I have a grid or <div> here which as openProductDetails() on click event. And inside the grid, I have a button which has an addToCart(). The problem is when I click the button, the openProductDetails() is also triggered. I cannot find a way to prevent the click event of the parent element when the button is clicked.

Thanks in advance.

Sajeetharan · Accepted Answer · 2017-04-01 04:35:51Z

1

You can use Use event.stopPropation() .This variable is a reference to JS event object and can be used to call stopPropagation()

 <div class="col col-50"
        ng-repeat="col in row"
        ng-click="openProductDetails(col.prod_id);">
        <button 
            ng-click="addToCart(col.prod_id); $event.stopPropagation();">
            Add to cart
        </button>
    </div>

answered Apr 1, 2017 at 4:35

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - Button click contained in grid with ng-click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related