Rangée de démarrage cliquable avec angulaire

Question

J'ai une table de style bootstrap. Le contenu de cette table est rempli avec Angular.js. Comment rendre une ligne cliquable pour appeler une fonction dans l'oscilloscope?

Le code suivant ne fonctionne pas pour moi (la partie ng-click):

Table:

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

Manette:

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

Answer 1

Suggestion et le violon :

<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

Vous pouvez simplement passer l'ingrédient en argument

ng-click = "setSelected (ingrédient)"

et dans le contrôleur

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

Et si également ce qui rend le tr sélectionnable: 

HTML: 

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

CSS:

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

Voir un exemple JSFiddle

Answer 4

Angular 6

HTML:

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

CSS:

tr:hover {
    cursor: pointer;
}