Question

您好我陷入了这样一种情况：我必须创建一个表格，以便每个Metaset我必须在表格中显示集合的行。理想情况下，Metaset应该有一个行跨度，其中的行必须跨越。像这样的东西 Metaset1 SetAttr1 Setattr2 设置Attr2 SetAttr2 Metaset2 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>

我现在要求只有metaset中的第一行必须最初显示，其余的只应在该元集上单击按钮后显示。

如何根据accopomodat ethat要求修改这样的结构。我已经尝试将所有内容放入一行并且在diabling中显示第二行中的metaset，如下所示，但行行显示为行跨度现在已丢失..

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

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

Answer 2

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

检查此out以获取ngShow

检查此out以获取ngHide

用法相对简单，例如文档：

dictA + dictB != dictB + dictA

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

Answer 3

可以根据细节行是否可见来计算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规则就可以使其像平滑的手风琴一样

的 DEMO

如何在ng-repeat中创建一个元素只重复一次？

3 个答案: