ngAngular-js Hide parent element if child element is empty

Question

I would like to use angular to show/hide or remove a parent div, dependant on the contents of a child div.

<div id="display-wrapper">
  <div class="display-title">{{SELECTION.TITLE}}</div>
  <div class="display-text">{{selection.text|| SELECTION.NO_TEXT}}</div>
</div>

Depending on what the user has selected in a search window the div will be populated with data. Sometimes there will be no data for these particular divs. I am happy to use ngShow or ngIf as it won't affect display or logic. So if the child div display-text is empty, I want the parent div to be removed or hidden.

I have tried capturing innerHTML or innerText and while I can do it for the parent div, I cannot get the parent div to operate based on the contents of the child.

Addition after suggestion.

Is it possible my site is interfering? If I try the following on jsfiddle it behaves as I want.

<div id="display-wrapper" ng-show='{{selection.text}}'>
  <div class="display-title">{{SELECTION.TITLE}}</div>
  <div class="display-text">{{selection.text|| SELECTION.NO_TEXT}}</div>
</div>

essentially if there is a value assigned to selection.text the div shows, if either selection.text is not assigned or is assigned the empty string, the div does not show.

When I try this on the site I get the following code generated.

(1) When selection.text = "I should be visible"

<div id="display-wrapper" ng-show="I should be visible" style="display: none;">
  <div class="display-title ng-binding">
    TITLE
  </div>
  <div class="display-text" ng-binding">
    I should be visible
  </div>
</div>

(2) When selection.text = ""

<div id="display-wrapper" ng-show="" style="display: none;">
  <div class="display-title ng-binding">
    TITLE
  </div>
  <div class="display-text" ng-binding">
    no user data
  </div>
</div>

(2) is doing what it should do and not displaying, (1) should display as ng-show="I should be visible" but the code has generated a style="display: none;"

Any help please?

ng-show='{{selection.text||SELECTION.NO_TEXT||SELECTION.TITLE}}' does not work? (if this gets too complex, move the condition to the controller ng-show='sectionIsEmpty()' or model ng-show='sectionIsEmpty') — Thilo
– Thilo, Commented May 25, 2014 at 23:30
we can ignore SELECTION.TITLE I tried variations on ng-show='{{selection.text||SELECTION.NO_TEXT}', no joy. SELECTION.NO_TEXT populates the empty div with "no user data". when I use the above I get ng-show="WHATEVER THE USER HAS ADDED" or ng-show="no user data" and the div is visible. If I modify it to ng-show='{{selection.text||""}' I get ng-show="WHATEVER THE USER HAS ADDED" or ng-show="" and in both cases I get style="display:none" being added to the div and in all cases the div is not-visible. — Niccolo
– Niccolo, Commented May 26, 2014 at 12:58
oops. Probably ng-show='selection.text||SELECTION.NO_TEXT' (without the braces). — Thilo
– Thilo, Commented May 26, 2014 at 23:14
Thilo, that worked. In my defence I have been using angularjs for just under a week. If you want to post it as an answer I can mark it right! — Niccolo
– Niccolo, Commented May 26, 2014 at 23:22

Thilo · Accepted Answer · 2014-05-26 23:27:25Z

1

<div id="display-wrapper" ng-show='{{selection.text}}'>

This looks like it results in double interpolation. The {{ }} is for interpolating an expression into HTML, it is not necessary when we are already in a place where Angular expects an expression.

You should change it to

<div id="display-wrapper" ng-show='selection.text'>

You say the first pattern still works on JSFiddle. No idea why. Maybe a different version of Angular? Either way, the second pattern should work for all situations.

answered May 26, 2014 at 23:27

Thilo

264k107 gold badges527 silver badges674 bronze badges

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

1 Comment

Niccolo Over a year ago

I am not sure why I got a jsfiddle success there, possibly as I included the values as $scope variables? I am not to concerned as your explanation makes sense and solved my problem, thanks.

Collectives™ on Stack Overflow

ngAngular-js Hide parent element if child element is empty

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related