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

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

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

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

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

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

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

Ответ 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();
    }
}

Разметка:

<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/

Ответ 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>