角度の付いたクリック可能なブートストラップ行

Question

私はブートストラップでスタイリングされたテーブルを持っています。このテーブルの内容は、Angular.jsを使用して埋められます。スコープ内の関数を呼び出すように行をクリック可能にするにはどうすればよいですか？

次のコードは（一部をNGクリック）私のために動作しません：

表：

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

コントローラー：

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

Answer 1

提案とfiddle：

<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

あなただけの引数に成分を渡すことができ

NGクリック= "するsetSelected（成分）"

とコントローラで

$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; 
} 

そして、TRの選択をしたいただきました！また、もし：

HTML：

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

CSS：

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

View JSFiddle Sample