如何让一个元素在n -repeat中只重复一次

How do I make an element inside ng-repeat to repeat just once?

本文关键字：一次 -repeat 元素 一个      更新时间：2023-09-26

嗨，我陷入了一种情况，我必须创建一个表，这样对于每个元集，我必须在表中显示集的行。理想情况下，像元集应该有一个行跨度，其中的行必须跨度。像这样Metaset1 SetAttr1 Setattr2设置Attr2 SetAttr2Metaset2 SetAttr1 Setattr2设置Attr2 SetAttr2我使用了以下结构:

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

请帮。

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

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

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

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

查看ngShow

查看

用法相对简单，文档中的示例:

 <!-- 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时，它将显示

可以根据详细信息行是否可见来计算rowspan。

将使用变量isVisible，该变量可以在每个<tbody>重复中切换，因为ng-repeat为每个重复元素创建了子作用域。

因此，当行不可见时，表达式将rowspan设置为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来切换dom

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

ng-if支持ngAnimate的css动画，所以用一些css规则可以使它像一个平滑的手风琴

演示

相关文章：