Условно добавление элементов в блок ng-repeat

Можно ли добавить материал в разметку на основе условия? Как в этом примере, когда я хочу добавить td только на первую итерацию (только для первого элемента myData)?

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   @if myData.indexOf(m) = 0 then // something like that
   <td rowspan ="{{m.length}}">
      <ul>
        <li ng-repeat="d in days">
           {{d.hours}}
        </li>
      </ul>
   </td> 
</tr>

Ответы

Ответ 1

Да, у AngularJS есть 2 директивы по этому поводу:

  • ng-show/ng-hide семейство директив может использоваться для скрытия (по используя CSS-правила отображения), части DOM три, основанные на результате оценивая выражение.
  • Если мы хотим физически удалить/добавить части DOM условно семейство директив ng-switch (ng-switch, ng-switch-when, ng-switch-default) пригодится.

В конце дня оба решения дадут один и тот же визуальный эффект, но основная структура DOM будет отличаться. Для простых случаев использования ng-show/ng-hide, вероятно, ОК, но большие части DOM следует обрабатывать с помощью ng-switch.

В случае использования этого вопроса я бы посоветовал использовать ng-switch.

Ответ 2

Лучшее решение должно быть:

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   <td ng-if="$first" rowspan="{{myData.length}}">
       <ul>
           <li ng-repeat="d in days">
               {{d.hours}}
           </li>
       </ul>
   </td> 
</tr>