AngularJS Do Not Execute Md-order-by

Contents hide

Problem Description:

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 – 1

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
}

Rate this post