Only show number bigger than zero with Angular

Question

I dont want to show the price if it's value is 0, only show the name and nothing in price then ! If its greater than 0 then it should show both name and price.

How to do that?

<tr>
 <td>{{cars.name}}</td>
 <td>{{cars.price}}</td>
</tr>

Answer 1

Use ng-if if you don't want the cell included in the DOM, use ng-show if you want it to be included but not visible.

<tr>
 <td>{{cars.name}}</td>
 <td  ng-if="cars.price > 0">{{cars.price}}</td>
</tr>

If you're worried about HTML validators

<tr>
 <td>{{cars.name}}</td>
 <td ng-if="cars.price &gt; 0">{{cars.price}}</td>
</tr>

also works.

This will however probably skew your table a bit, since ng-show still uses display:none;. You can fix that by overriding the .ng-hide CSS class that gets assigned to hidden elements and set it to visibility: hidden; instead.