Conditionally adding elements in ng-repeat block
angularjs
Solution
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.
Problem
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> ```