Conditionally adding elements in ng-repeat block

Question

Is it possible to add stuff to the markup based on condition? Like in this example, when I want to add td only on the first iteration (only for the first element of 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>

Answer 1

Yes, AngularJS has 2 directives for this occasion:

• The ng-show / ng-hide family of directives can be used to hide (by using display CSS rules) parts of the DOM three based on a result of evaluating an expression.
• If we want to physically remove / add parts of the DOM conditionally the family of ng-switch directives (ng-switch, ng-switch-when, ng-switch-default) will come handy.

At the end of the day both solutions will give the same visual effect but the underlying DOM structure will be different. For simple use cases ng-show / ng-hide is probably OK, but larger portions of the DOM should be treated with ng-switch.

For the use case from this question I would advice using ng-switch.

Answer 2

The best solution should be:

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