javascript - AngularJS:点击显示html表格中行之间的一些信息？

Question

我有一个 html 表，<tbody>它是用 Angular ng-repeat 生成的。这是我的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>

这是浏览器中我的表格的一部分:

使用 AngularJS，是否可以这样做，如果您单击某个表格行，表格的其余部分会稍微移动，并且在中间显示有关特定行的一些信息？这是预期的输出:

如果可能的话我可以这样做吗？

Answer 1

你可以这样做:

<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>