CODEWITHSUNDEEP
angularjsangularjs-ng-click
uksz
uksz

Reputation: 18719

NgClick on <li> NgClick inside of it

I have following code:

 <ul class="dropdown-menu">
   <li ng-click="setValue('X')" ng-class="selected === 'X' ? 'active' : 'not-active'"><span>X <i class="fa fa-times" ng-click="unselect()"/></span></li>
   <li ng-click="setValue('Y')" ng-class="selected === 'Y' ? 'active' : 'not-active'"><span>Y <i class="fa fa-times" ng-click="unselect()"/></span></li>
 </ul>

I am switching classes if the value is selected. I would like to add an event on icon (which is only visible when its is selected), however, whenever I click on the icon, two ng-click's are triggered. My question is: how can I disable the ng-click on the parent element, when the row is selected?

Upvotes: 4

Views: 3729

Answers (2)

Bikas
Bikas

Reputation: 2759

When you write and event in a DOM element, it's invocation bubbles up to call event attached to all it's parent till HTML tags.

You can prevent this occurrence by preventing the event to propagate further. stopPropagation does exactly that. You can find, details here https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

In your, unselect function, you can call like this

function unselect(event) {
    event.stopPropagation();
    // Your original code
}

Upvotes: 2

gtlambert
gtlambert

Reputation: 11961

You need to add $event.stopPropagation() to your inner ng-click: 

<i class="fa fa-times" ng-click="unselect(); $event.stopPropagation();"/>

This will prevent the ng-click on the parent element from being called.

Upvotes: 14

Related Questions