Javascript 如何使ng中的元素重复一次？

嗨，我陷入了这样一种情况：我必须创建一个表，这样对于每个图元集，我必须在表中显示集合行。理想情况下，like元集应该有一个行范围，并且其中的行必须是跨行的。像这样的 Metaset1 SetAttr1 Setattr2 设置属性2设置属性2 Metaset2 SetAttr1 Setattr2 设置属性2设置属性2 我使用了以下结构：

<tbody ng-repeat="(metaset, ids) in metasetHashMapTree">
                 <tr>
                    <td rowspan = "{{(ids.length*2) + 1}}"><span style="font-weight:bold">{{metaset}}</span></td>
                 </tr>
                 <tr ng-repeat="item in ids" >
                    <td width="10%" align="{{item.treeLevelStyle['align']}}"  bgcolor="{{item.treeLevelStyle['color']}}"> <span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyId}}</span></td>
                    <td width="2%"  class="{{item['A-S0-a']}}"></td>
                    <td width="2%"  class="{{item['A-S0-b']}}"></td>
                    <td width="2%"  class="{{item['A-S0-c']}}"></td>
                    <td width="2%"  class="{{item['A-S0-d']}}"></td>
                    <td width="2%"  class="{{item['A-S0-e']}}"></td>
                    <td width="2%"  class="{{item['A-S0-f']}}"></td>
                    <td width="2%"  class="{{item['A-S0-g']}}"></td>
                    <td width="2%"  class="{{item['A-S1-a']}}"></td>
                    <td width="2%"  class="{{item['A-S1-b']}}"></td>
                    <td width="2%"  class="{{item['A-S2-a']}}"></td>
                    <td width="2%"  class="{{item['A-S3-a']}}"></td>
                    <td width="2%"  class="{{item['A-S4-a']}}"></td>
                    <td width="2%"  class="{{item['A-S5-a']}}"></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyTenant}}</span></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyRelease}}</span></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyComponentAffected}}</span></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyStatus}}</span></td>
                    <td font-weight : "{{item.treeLevelStyle['font-weight']}}" bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.Match}}</span></td>
                    <td  bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.SellDropFix}}</span></td>
                 </tr>
              </tbody>

{{metaset}}
{{item.BuyId}
{{item.buytanent}
{{item.buylease}
{{item.BuyComponentInfected}
{{item.BuyStatus}
{{item.Match}
{{item.SellDropFix}

我现在有一个要求，只有元集中的第一行必须首先显示，其余的行应该只在单击该元集中的按钮后显示

如何修改结构以符合要求。我试着将所有内容放在一行中，并在第二行中显示元集，如下图所示，但行行显示为行跨度现在丢失

  <tbody ng-repeat="(metaset, ids) in metasetHashMapTree">
               <!--   <tr>
                    <td rowspan = "{{(ids.length*2) + 1}}"><span style="font-weight:bold">{{metaset}}</span></td>
                 </tr> -->
                 <tr ng-repeat="item in ids" >
                 <td> <span style="font-weight:bold">{{metaset}}</span></td>
                    <td width="10%" align="{{item.treeLevelStyle['align']}}"  bgcolor="{{item.treeLevelStyle['color']}}"> <span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyId}}</span></td>
                    <td width="2%"  class="{{item['A-S0-a']}}"></td>
                    <td width="2%"  class="{{item['A-S0-b']}}"></td>
                    <td width="2%"  class="{{item['A-S0-c']}}"></td>
                    <td width="2%"  class="{{item['A-S0-d']}}"></td>
                    <td width="2%"  class="{{item['A-S0-e']}}"></td>
                    <td width="2%"  class="{{item['A-S0-f']}}"></td>
                    <td width="2%"  class="{{item['A-S0-g']}}"></td>
                    <td width="2%"  class="{{item['A-S1-a']}}"></td>
                    <td width="2%"  class="{{item['A-S1-b']}}"></td>
                    <td width="2%"  class="{{item['A-S2-a']}}"></td>
                    <td width="2%"  class="{{item['A-S3-a']}}"></td>
                    <td width="2%"  class="{{item['A-S4-a']}}"></td>
                    <td width="2%"  class="{{item['A-S5-a']}}"></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyTenant}}</span></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyRelease}}</span></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyComponentAffected}}</span></td>
                    <td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyStatus}}</span></td>
                    <td font-weight : "{{item.treeLevelStyle['font-weight']}}" bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.Match}}</span></td>
                    <td  bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.SellDropFix}}</span></td>
                 </tr>
              </tbody>`

{{metaset}}
{{item.BuyId}
{{item.buytanent}
{{item.buylease}
{{item.BuyComponentInfected}
{{item.BuyStatus}
{{item.Match}
{{item.SellDropFix}
`

请提供帮助。

根据中的建议，您应该使用Limito过滤器

<tr ng-repeat="item in ids | limitTo:2" >

---

限制量可以在控制器中指定，也可以直接插入过滤器。

如果要隐藏/显示元素，可以使用ngHide或ngShow指令

检查一下这个节目

检查此项是否存在ngHide

使用相对简单，文档中的示例如下：

 <!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue" class="ng-hide"></div>

<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue"></div>

---

与ngShow相同，只是当myValue为true时，它将显示。

可以根据详细信息行是否可见来计算行跨度

将使用变量

isVisible

，该变量可以在每个

重复中切换，因为

ng repeat

为每个重复的元素创建子范围

因此，当行不可见时，表达式将

行span

设置为

1

，当行不可见时，表达式将使用您的计算

<tr>
     <!-- rowspan will be "1" if not visible, or calculated if they are -->
     <td rowspan = "{{isVisible ? (ids.length*2) + 1 : 1}}">
         <span >{{metaset}}</span>
         <button ng-click="isvisible = !isVisible">Toggle Details</button>
     </td>
</tr>

ng if

支持

ngAnimate

css动画，因此通过一些css规则，可以使其像一个平滑的手风琴

---

如果您发现这是解决方案，请将其标记为正确。

<tr ng-repeat="item in ids" ng-if="isVisible">
        <td></td>
        <td></td>  
        ........ 
</tr>