Clickable bootstrap row with angular

Question

I have got a table, styled with bootstrap. The content of this table is filled using Angular.js. How do I make a row clickable so it will call a function in the scope?

T

Answer 1

HTML:

<table class="table-hover">

CSS:

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

And if also whats made the tr selectable:

HTML:

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

CSS:

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

View JSFiddle Sample

Answer 2

Angular 6

HTML:

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

CSS:

tr:hover {
    cursor: pointer;
}

Answer 3

You could just pass the ingredient in argument

ng-click="setSelected(ingredient)"

and in controller

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

Answer 4

Suggestion and the 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>