点击引导一行角 [英] Clickable bootstrap row with angular

问题描述

我有一个表，有引导的风格。该表的内容是使用Angular.js填充。怎样使一排可点击所以它会调用范围的功能？

以下code不为我工作（毫微克单击部分）：

表：

 ＆LT;表类=表的表悬停＆GT;
        ＆LT;＆THEAD GT;
            ＆所述; TR＆GT;
                ＆LT;第i个姓名和LT; /第i
                ＆LT;第i状态和LT; /第i
            ＆LT; / TR＆GT;
        ＆LT; / THEAD＆GT;
        ＆LT;＆TBODY GT;
            ＆LT; TR NG重复=成分在成分NG点击=的setSelected（{{$指数}}）;＆GT;
                ＆所述; TD＆GT; {{ingredient.name}}＆下; / TD＆GT;
                ＆所述; TD＆GT; {{ingredient.status}}＆下; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
 

控制器：

  $ scope.setSelected =功能（指数）{
    $ scope.selected = $ scope.ingredients [指数]
    的console.log（$ scope.selected）;
};
 

解决方案

建议和小提琴：

 ＆LT; TR NG重复=成分在成分NG点击=的setSelected（）;＆GT;
    ＆所述; TD＆GT; {{ingredient.name}}＆下; / TD＆GT;
    ＆所述; TD＆GT; {{ingredient.status}}＆下; / TD＆GT;
＆LT; / TR＆GT;＆LT;脚本＆GT;
VAR对myApp = angular.module（'对myApp'，[]）;功能MyCtrl（$范围）{    $ scope.ingredients = [
        {'名'：'土豆'}，
        {'名'：'番茄'}
    ];    $ scope.setSelected =功能（）{
        $ scope.selected = this.ingredient;
        的console.log（$ scope.selected）;
    };}
＆LT; / SCRIPT＆GT;
 

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?

The following code does not work for me (the ng-click part):

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>

Controller:

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

解决方案

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>

这篇关于点击引导一行角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！