AngularJS:点击显示html表中行之间的一些信息?

时间:2014-09-12 12:50:43

标签: javascript html angularjs

我有一个html表格,<tbody>生成的角度为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>

以下是我在浏览器中的表格部分:

enter image description here

使用AngularJS,是否可以这样做,如果你点击一些表格行,表格的其余部分会稍微移动一下,中间会显示一些特定行的信息?这是预期的输出:

enter image description here

如果有可能,我可以这样做吗?

1 个答案:

答案 0 :(得分:3)

你可以这样做:

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