CODEWITHSUNDEEP
angularjs
user3845561
user3845561

Reputation: 68

Hide element in which data is empty using Angular

Here is code pen demo

Want to hide below element if x.phone2 is null.

<div class="telePhone"  ><strong>Phone2 :</strong> {{x.phone2}}</div>

Upvotes: 2

Views: 960

Answers (3)

nweg
nweg

Reputation: 2865

If want to hide it and don't need two way binding use:

<div class="telePhone" ng-if="x.phone"><strong>Phone2 :</strong> {{x.phone2}}</div>

If you still need two way binding use:

<div class="telePhone" ng-show="x.phone"><strong>Phone2 :</strong> {{x.phone2}}</div>

Using ng-if will lower you overhead, but if you need to show the div if the x.phone value changes, you need to use ng-show.

Upvotes: 0

mcr
mcr

Reputation: 772

<div class="telePhone" 
     ng-if="x.phone2">
  <strong>Phone2 :</strong> {{x.phone2}}
</div>

Upvotes: 0

Davin Tryon
Davin Tryon

Reputation: 67296

You can use ng-if for that (docs):

<div class="telePhone"  ng-if="x.phone2"><strong>Phone2 :</strong> {{x.phone2}}</div>

Updated code pen.

Upvotes: 1

Related Questions