javascript - 如何使 ng-repeat 中的元素仅重复一次？

Question

嗨，我陷入了这样一种情况:我必须创建一个表，以便对于每个元集，我必须在表中显示集合行。理想情况下，Metaset 应该有一个行跨度，并且其中的行必须跨度。像这样的东西 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>

我现在有一个要求，即最初必须显示元集中的第一行，而其余行仅在单击该元集上的按钮后才显示。

如何修改结构以适应该要求。我尝试将所有内容放入一行并禁用在第二行中显示元集，如下所示，但行线显示为行跨度现在丢失了..

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

请帮忙。

Answer 1

按照 documentation 中的建议您应该使用 LimitTo 过滤器。

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

限制量可以在 Controller 中指定或直接插入过滤器中。