twitter-bootstrap - 带角度的可点击引导行

Question

我有一张桌子，用引导程序设计。该表的内容是使用 Angular.js 填充的。如何使一行可点击，以便它调用范围内的函数？

以下代码对我不起作用（ng-click 部分）：

桌子：

    <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

建议和小提琴：

<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-click="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;
}

查看 JSFiddle 示例

Answer 4

角 6

HTML：

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

CSS：

tr:hover {
    cursor: pointer;
}