CODEWITHSUNDEEP
javascripthtmlcssangularjs
Julius Doan
Julius Doan

Reputation: 354

Two ng-clicks on in same div

So I've been looking around for an answer for this but I just couldn't find the answer. So what I have is a ng-repeat of items that are in a particular class="list-items". When I click on each of the item in items, it should execute a function. Within each list I have an remove button which I would like to remove the item when clicked.

So some code for reference:

 <div ng-click="executeCallback($index)" class="list-items">
        <div class="item-info">
            <span>some info here</span>
        </div>
        <button ng-click="removeItem($index)">X</button>
 </div>

So I did right now, in my CSS, i tried using an position absolute on the button and a z-index of like 10000 to show that it is greater than, but when I click the removeItem button, it still calls the executeCallback function. I don't want it to call the executeCallback function.

Is there a way to have the removeItem function be called only when the remove button is clicked and not the parent class?

Upvotes: 0

Views: 1216

Answers (2)

zeeshan Qurban
zeeshan Qurban

Reputation: 387

You can add multiple events in one ng-click.

 <div ng-click="executeCallback($index)" class="list-items">
    <div class="item-info">
        <span>some info here</span>
    </div>
    <button ng-click="removeItem($index);$event.stopPropagation()">X</button>

Upvotes: 3

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. Source

You can use this, directly in the HTML template, to stop its propagation by calling $event.stopPropagation(). Just add it on the button and you should be fine:

<button ng-click="removeItem($index);$event.stopPropagation()">X</button>

Upvotes: 0

Related Questions