Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to apply an ng-if (or other conditional) in multiple <td> elements while keeping it DRY

Tags:

html

angularjs

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?

like image 692
Kostas Rousis Avatar asked Mar 25 '15 09:03

Kostas Rousis


People also ask

What is* in* ngIf in Angular?

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.

How does* ngIf work?

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.


1 Answers

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

like image 170
squiroid Avatar answered Sep 30 '22 14:09

squiroid