AngularJS: on-click display some information between rows in html table?

Question

I have an html table, <tbody> of it is generated with angular ng-repeat. Here is my html:

<tbody ng-repeat="car in carList | filter:tableFilter">
    <tr>
        <td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
        <td>{{car.review}}</td>
        <td>{{car.rating}}</td>
        <td>{{car.fiveStarPercent}}</td>
        <td>{{car.recommended}}</td>
        <td>{{car.price}}</td>
    </tr>
</tbody>

Here is the part of my table in the browser:

enter image description here

With AngularJS, is it possible to do so, if you click on some table row, the rest of the table shifts a bit and in the middle some information about specific row is showing up? Here is an expected output:

enter image description here

If it is possible then can I do this?

You can always append a td with the styling that is displayed in the image after the click event — V31
– V31, Commented Sep 12, 2014 at 12:55

rob · Accepted Answer · 2014-09-12 13:06:43Z

3

You could do something like this:

<tbody>
    <tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="car.showDetails = !car.showDetails">
        <td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
        <td>{{car.review}}</td>
        <td>{{car.rating}}</td>
        <td>{{car.fiveStarPercent}}</td>
        <td>{{car.recommended}}</td>
        <td>{{car.price}}</td>
    </tr>
    <tr ng-repeat-end ng-show="car.showDetails">
        Some details...
    </tr>
</tbody>

answered Sep 12, 2014 at 13:06

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

2 Comments

Michael Over a year ago

There is one interesting issue, in your solution when you press on some row and then press on another, the first row doesn't close. Do you know how to fix that?

rob Over a year ago

Instead of storing showDetails on the individual car objects you could store an activeDetailsIndex variable on your controller and just set it to the index of the car that you want to show.

Collectives™ on Stack Overflow

AngularJS: on-click display some information between rows in html table?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related