angularjsng-show

Angular ng-show Still Shows <div> Element When Empty

How can I hide/remove the containing <div> element when the value is empty:

<div class="small" ng-show="ID !== ''">{{ info.ID }} | </div>

Renders:

<div class="small">|</div>

Can I remove the <div> completely if empty? I've tried:

<div class="small" ng-show="!ID">{{ info.ID }}</div >
Solution

  • You are checking value of ID property which is not the ID within info object so use info.ID within the ng-show.

    <div class="small" ng-show="info.ID">{{ info.ID }} | </div>
<!-- -----------------------^^^^^^^----------------------->

    If you don't want to render the element itself then use ng-if directive since ng-show directive simply hide using some CSS.

    <div class="small" ng-if="info.ID">{{ info.ID }} | </div>
<!-- ---------------------^^^^^^^----------------------->