I have a table with a column that has an icon to perform an action when I click on it. Except that my column also has an md-order-by which does the action when I click on my icon.
My icon is defined in my like this example:
<th md-column md-order-by="test">
Test 1<br/>
<div ng-click="displayOtherColumn()">
<md-icon md-svg-icon="chevron-right" >
<md-tooltip md-direction="bottom">
See more
</md-tooltip>
</md-icon>
</div>
</th>
I would like that when I click on my icon the md-order-by does not take place
CodePudding user response:
Stop event propagation when click event is triggered.
<th md-column md-order-by="test">
Test 1<br/>
<div ng-click="displayOtherColumn($event)">
<md-icon md-svg-icon="chevron-right" >
<md-tooltip md-direction="bottom">
See more
</md-tooltip>
</md-icon>
</div>
</th>
Javascript:
function displayOtherColumn(event){
event.stopPropagation();
// your additional logic
}