twitter-bootstrap – 具有角度的可点击引导行

发布时间：2020-12-18 00:18:51 所属栏目：安全来源：网络整理

导读：我有一张桌子,风格有自举.此表的内容使用Angular.js填充.如何使行可点击,以便调用范围内的函数？以下代码对我无效(ng点击部分)：表： table class="table table-hover" thead tr thName/th thStatus/th /tr /thead tbody tr ng-repeat="ingredient in ingr

我有一张桌子,风格有自举.此表的内容使用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);
};

解决方法

建议和 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!