Как мне сделать элемент внутри ng-repeat, чтобы повторить только один раз?

Question

Как мне сделать элемент внутри ng-repeat, чтобы повторить только один раз?

0

Привет, я застрял в ситуации, когда мне нужно создать таблицу, такую, что для каждого Metaset мне нужно показать строки множеств в таблице. В идеале, как и у Metaset, должен быть пробег строки, а строки внутри него должны охватывать. Что-то вроде этого Metaset1 SetAttr1 Setattr2 Set Attr2 SetAttr2 Metaset2 SetAttr1 Setattr2 Set 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>'

Пожалуйста помоги.

lostalien 01 окт. 2015, в 02:18

Источник

Теги:

javascript

angularjs

ng-repeat

3 ответа

0

Таблица строк может быть рассчитана на основе того, видны ли строки данных или нет.

Будет использовать переменную isVisible которая может быть переключена в каждом повторении <tbody> поскольку ng-repeat создает isVisible область для каждого повторяющегося элемента.

Таким образом, выражение будет устанавливать 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

charlietfl 30 сен. 2015, в 22:07

0

Если вы хотите скрыть/показать элементы, вы можете использовать директивы ngHide или ngShow.

Проверьте это из за 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 истинно, оно будет отображаться.

user3186219 30 сен. 2015, в 21:43

Ещё вопросы

Luke Farnell · Accepted Answer · 2015-09-30T22-19-00.000Z

Как указано в документации, вы должны использовать фильтр LimitTo.

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

Предельная сумма может быть указана в контроллере или вставлена непосредственно в фильтр.

Пожалуйста, отметьте это правильно, если вы нашли это решение.