CODEWITHSUNDEEP
angularjsconditional-statements
user3635120
user3635120

Reputation: 73

Only show number bigger than zero with Angular

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>

Upvotes: 2

Views: 6343

Answers (2)

Vamsi
Vamsi

Reputation: 9780

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

Edit: if ng-show is evaluated to false it will hide the element by applying display:none; to the element style.

you can also use ng-if which will not render the element at all

Upvotes: 6

ivarni
ivarni

Reputation: 17878

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.

Upvotes: 2

Related Questions