Açılı

Question

ile tıklanabilir önyükleme satırı satırı Bir önyükleme ile biçimlendirilmiş bir tablom var. Bu tablonun içeriği Angular.js kullanılarak doldurulur. Bir satır tıklanabilir yapabilir miyim, böylece kapsamda bir işlev çağırır?

Tablo:

<table class="table table-hover"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Status</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="ingredient in ingredients" ng-click="setSelected({{$index}});"> 
       <td>{{ ingredient.name }}</td> 
       <td>{{ ingredient.status }}</td> 
      </tr> 
     </tbody> 
    </table> 

Denetleyici:

$scope.setSelected = function(index) { 
    $scope.selected = $scope.ingredients[index]; 
    console.log($scope.selected); 
}; 

Answer 1

Öneri ve fiddle:

Aşağıdaki kod benim için (ng tıklama kısmını) çalışmıyor

<tr ng-repeat="ingredient in ingredients" ng-click="setSelected();"> 
    <td>{{ ingredient.name }}</td> 
    <td>{{ ingredient.status }}</td> 
</tr> 

<script> 
var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 

    $scope.ingredients = [ 
     {'name': 'potato'}, 
     {'name': 'tomato'} 
    ]; 

    $scope.setSelected = function() { 
     $scope.selected = this.ingredient; 
     console.log($scope.selected); 
    }; 

} 
</script> 

Answer 2

sadece argüman madde geçebileceği

ng tıklama = "setSelected (madde)"

ve denetleyici içinde

$scope.setSelected = function(my_ingredient) { 
     $scope.selected = my_ingredient; 
     console.log($scope.selected); 
    }; 

Answer 3

HTML:

<table class="table-hover"> 

CSS:

.table-hover > tbody > tr:hover { 
    background-color: #f5f5f5; 
} 

Ve tr seçimli yapılmış neyin da eğer:

HTML:

<tr ng-click="doSomething()"> 

CSS:

tr[ng-click] { 
    cursor: pointer; 
} 

View JSFiddle Sample