I want to display a number of <td>
elements based on the same condition. I am currently doing that with multiple, identical, ng-if
directives, as such:
<tbody> <tr> <td> Display unconditionally </td> <td> Same here... (imagine more columns) </td> ... <td ng-if='myCondition'> Display based on condition </td> <td ng-if='myCondition'> And the same </td> <td ng-if='myCondition'> for plenty of columns </td> </tr> </tbody>
While this works one can't help but notice all the repetition. Any ideas on how I could DRY that up?
A shorthand form of the directive, *ngIf="condition" , is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Use ng-if-start and ng-if-end
<table> <tr> <td ng-if-start="false" >one</td> <td>two</td> <td ng-if-end >three</td></td> <td>foure</td> <td>five</td> </tr> </table>
Plunker
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With