Rangée d'amorçage cliquable avec angulaire

J'ai une table de style avec bootstrap. Le contenu de ce tableau est rempli à l'aide d'Angular.js. Comment puis-je faire une ligne cliquable ce qui fera appel à une fonction dans le champ d'application?

Le code suivant ne fonctionne pas pour moi (la ng-cliquez sur le cadre):

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>

Contrôleur:

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

source d'informationauteur Klaasvaak

  1. 43

    La Suggestion et la 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>
  2. 2

    Vous pouviez juste passer l'ingrédient argument

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

    et contrôleur de

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

    HTML: 

    <table class="table-hover">

    CSS:

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

    Et si, ce qui est fait de la tr sélectionnable:

    HTML: 

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

    CSS:

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

    Vue JSFiddle Échantillon

  4. 0

    Angulaire 6

    HTML:

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

    CSS:

    tr:hover {
    cursor: pointer;
}