Clickable bootstrap row with angular

Question

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

I think you just need to remove the {{}} around $index but you should describe better how it fails. For example you show that you're logging it but not the output of the log. — shaunhusain
– shaunhusain, Commented Jul 15, 2013 at 15:55
Nothing happens, no logging. But the {{$index}} is rendered to an numeric value. — Klaasvaak
– Klaasvaak, Commented Jul 15, 2013 at 16:23

marko · Accepted Answer · 2013-07-15 16:04:40Z

43

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>

edited Jul 15, 2013 at 16:04

answered Jul 15, 2013 at 15:57

marko

2,8211 gold badge33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eugenio Over a year ago

To decouple controller and template you can use ng-click="setSelected(ingredient);" and $scope.setSelected = function(item) { ... };.

Parth Acharya · Accepted Answer · 2017-03-04 09:20:47Z

2

You could just pass the ingredient in argument

ng-click="setSelected(ingredient)"

and in controller

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

answered Mar 4, 2017 at 9:20

Parth Acharya

5453 silver badges13 bronze badges

Comments

pdorgambide · Accepted Answer · 2017-06-30 15:03:03Z

1

HTML:

<table class="table-hover">

CSS:

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

And if also whats made the tr selectable:

HTML:

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

CSS:

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

View JSFiddle Sample

edited Jun 30, 2017 at 15:03

answered Jun 30, 2017 at 14:58

pdorgambide

1,86722 silver badges35 bronze badges

Comments

Stefan Mitic · Accepted Answer · 2018-07-22 21:46:48Z

0

Angular 6

HTML:

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

CSS:

tr:hover {
    cursor: pointer;
}

answered Jul 22, 2018 at 21:46

Stefan Mitic

1,6711 gold badge10 silver badges8 bronze badges

Collectives™ on Stack Overflow

Clickable bootstrap row with angular

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related