CODEWITHSUNDEEP
javascriptangular-ui
Paul Erdos
Paul Erdos

Reputation: 1375

Add clickable element within a clickable table row

Let's say I have a table row with a clickable element in it: 

  <tr ng-repeat="product in products" onclick="showProductDetail()">
      <td>{{product.id}}</td>
      <td>{{product.title}}</td>
      <td>{{product.price}}</td>
      <td>
        <switch id="enabled" name="enabled" ng-model="product.enabled" ng-change="enableProduct()"></switch>
      </td>
  </tr>

I'm using Angular UI Switch but the issue would be the same for any clickable element.

How do I make the row clickable but isolate the behavior of the switch? Currently it tries to do both, resulting in wonky behavior. I know I could just make each cell except that last one clickable, but is there a cleaner way?

Upvotes: 0

Views: 109

Answers (2)

Shaun
Shaun

Reputation: 927

If Dmitry's answer does not work.

Try calling the ng-change with enableProduct($event)

And within that function, call 

function enableProduct($event) {
   $event.stopPropagation();
   ...
}

Upvotes: 1

Dmitry Sokurenko
Dmitry Sokurenko

Reputation: 6132

I believe the <switch> handler should stop the event propagation. Try to return false from you ng-change handler. E.g.

ng-change="enableProduct(); return false"

Upvotes: 0

Related Questions