Hide element in which data is empty using Angular

Question

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

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

Davin Tryon · Accepted Answer · 2015-04-13 15:45:10Z

1

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

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

answered Apr 13, 2015 at 15:45

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mcr · Accepted Answer · 2015-04-13 15:47:52Z

0

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

answered Apr 13, 2015 at 15:47

mcr

7825 silver badges19 bronze badges

nweg · Accepted Answer · 2015-04-13 15:49:54Z

0

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.

answered Apr 13, 2015 at 15:49

nweg

2,8753 gold badges25 silver badges31 bronze badges