Bir hücrenin ve kenar boşluklarının köşeli olması dışında satırın tamamını tıklanabilir hale getirebilir miyim?

Question

ı Her satır bir çalışanı gösterir

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

benzeyen bir satır var diyelim ve (bir kurs için örneğin kayıt için) çalışan onaylayabilir/kontrol etmenizi sağlar. Kullanıcının, çalışanla ilgili daha fazla ayrıntı elde etmek için herhangi bir yere tıklayabilmesini istiyorum, ancak son sütuna tıklarlarsa ("Onaylandı?"), Daha fazla ayrıntıya gitmemesi gerekir, çünkü yalnızca onay kutusunu değiştirmelidir .

İşte benim bildiğim çözümleridir, hiçbiri büyük:

1. Bütün sıra: <tr class="clickable" ng-click="go()">. Tüm hücreleri ve kenar boşluklarını tıklanabilir yapar ve yalnızca bir ng-click girişini gerektirir, ancak onay kutusu yürütmek için "go()" ye neden olur, bu da kötüdür. Her hücre: <td class="clickable" ng-click="go()">...<td class="clickable" ng-click="go()">. Pro: sadece istediğim hücrelere sınırlama yapabilir. Con: bir çok tekrar (DRY değil) ve kenar boşluklarını özlüyor.
2. Özel "go" fn ile tüm satır: <tr class="clickable" ng-click="go()">, ancak "git" farklı hücreler arasında ayrım yapmayı bilir. Pro: Tam olarak bir etkisi var. Con: özel bir denetleyici eyleminde çok sayıda görünüm/html bilgisi gerektirir.

İlk 2 sütunu ve kenar boşluklarını tıklanabilir, ancak 3'ü veya kenar boşluklarını değil nasıl yapabilirim?

Answer 1

Bir son td 'onay kutusu için iki tıklama işleyicileri, bir bütün tr için bir, ikinci kullanabilirsiniz. İkinci kullanımda Event'un stopPropagation yöntemi.

Denetleyici:

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

Biçimlendirme:

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

Çalışma örneği: http://jsfiddle.net/zDMQB/1/

Answer 2

Bu nasıl?

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