javascript - Angular ng-repeat over multiple table rows and ng-show

Question

这是一个表格:

<tbody ng-repeat="objs in Objects" ng-click="Click()">
    <tr>
        <td><img src="{{objs.img}}">{{objs.name}}</td>
        <td>{{objs.owner}}</td>
        <td>{{objs.timeSt}}</td>
        <td>{{objs.state}}</td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    </tr>
    <tr ng-show="param"><td colspan="8">lol</td></tr>
    </tbody>

我需要通过单击并隐藏其他可见行来创建一个可见行。

Answer 1

很确定您不想在 tbody 元素上循环，而是在 tr 元素上循环。

对于重复多个元素，AngularJS 中有 ng-repeat-start 和 ng-repeat-end 指令:

<table>
  <tr ng-repeat-start="a in [1,2,3,4]">
    <td ng-click="param=!param">show second row</td>
  </tr>
  <tr ng-repeat-end ng-if="param">
    <td>ja</td>
  </tr>
</table>

以你的例子为例

<tbody>
<tr ng-repeat-start="objs in Objects" ng-click="param=!param">
    <td><img src="{{objs.img}}">{{objs.name}}</td>
    <td>{{objs.owner}}</td>
    <td>{{objs.timeSt}}</td>
    <td>{{objs.state}}</td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
</tr>
<tr ng-repeat-end ng-show="param"><td colspan="8">lol</td></tr>
</tbody>