Issue
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
Solution
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
}
Answered By - AvgustinTomsic
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.