How do I make an entire row clickable except for one cell and its margins in angular?

Question

Let's say I have a row that looks like

<tr>
  <td>John</td>
  <td>Smith</td>
  <td>Approved?<input type="checkbox"/></td>
</tr>

Each row shows one employee, and allows you to check to approve/disapprove the employee (e.g. for registration for a course). I want the user to be able to click anywhere on the row to get greater detail about the employee, but if they click on the last column ("Approved?") it should not go to greater detail, since it should just change the checkbox.

Here are the solutions I know of, none is great:

1. Entire row: <tr class="clickable" ng-click="go()">. Makes all the cells and margins clickable, and only requires one ng-click entry, but then the checkbox causes "go()" to execute, which is bad.
2. Each cell: <td class="clickable" ng-click="go()">...<td class="clickable" ng-click="go()">. Pro: can restrict to just the cells I want. Con: lots of repetition (not DRY), and misses the margins.
3. Entire row with special "go" fn: <tr class="clickable" ng-click="go()">, but "go" knows how to differentiate between different cells. Pro: Has exactly the effect. Con: requires lots of view/html knowledge in a specialized controller action.

How can I make the first 2 columns and their margins clickable, but not the 3rd or its margins?

Answer 1

You can use two click handlers, one for a whole tr , second for a last td' checkbox. In the second use Event's stopPropagation method.

Controller:

var TableCtrl = function($scope){
    $scope.click1 = function(){
        console.log("Click 1 method")
    }
    $scope.click2 = function(e){
        console.log("Click 2 method");
        e.stopPropagation();
    }
}

Markup:

<table ng-controller="TableCtrl">
<tr ng-click="click1()">
  <td>John</td>  <td>Smith</td>
  <td>Approved?<input type="checkbox" ng-click="click2($event)"/></td>
</tr>
</table>

Working example: http://jsfiddle.net/zDMQB/1/