Как сделать целую строку нажатой, за исключением одной ячейки и ее полей в угловом?

Question

Скажем, у меня есть строка, которая выглядит как

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

Каждая строка показывает один сотрудник, и позволяет проверить одобрить/одобряю работника (например, для регистрации на курс). Я хочу, чтобы пользователь мог щелкнуть в любом месте строки, чтобы получить более подробную информацию о сотруднике, но если они нажмут на последний столбец («Approved?»), Он не должен идти более подробно, так как он должен просто изменить флажок ,

Вот решения я знаю, никто не велик:

1. Весь ряд: <tr class="clickable" ng-click="go()">. Делает все ячейки и поля доступными по клику, и требуется только одна запись ng-click, но при этом флажок вызывает действие «go()», что плохо.
2. Каждую ячейку: <td class="clickable" ng-click="go()">...<td class="clickable" ng-click="go()">. Pro: может ограничивать только те ячейки, которые я хочу. Con: много повторений (не DRY) и пропускает поля.
3. Весь ряд со специальным «go» fn: <tr class="clickable" ng-click="go()">, но «go» знает, как различать разные ячейки. Pro: Имеет точно эффект. Con: требует много знаний view/html в специализированном действии контроллера.

Как я могу сделать первые 2 столбца и их поля кликабельными, но не третьим или его пределами?

Answer 1

Вы можете использовать два обработчика щелчка, один для целого tr, второй для последнего td "флажок. При втором использовании Event метод stopPropagation.

Контроллер:

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> 

Рабочий пример: http://jsfiddle.net/zDMQB/1/

Answer 2

Как насчет этого?

<tr> 
    <td style="cursor: pointer;" ng-click="alert('hello1')">John</td> 
    <td style="cursor: pointer;" ng-click="alert('hello2')">Smith</td> 
    <td>Approved?<input type="checkbox"/></td> 
</tr>