ngAngular-js Скрыть родительский элемент, если дочерний элемент пуст

Question

Я хотел бы использовать угловое отображение/скрытие или удаление родительского div в зависимости от содержимого дочернего div.

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

В зависимости от того, что пользователь выбрал в окне поиска, div будет заполнен данными. Иногда данных для этих отдельных разделов не будет. Я рад использовать ngShow или ngIf, так как это не повлияет на отображение или логику. Итак, если дочерний div-текст-текст пуст, я хочу, чтобы родительский div был удален или скрыт.

Я попытался захватить innerHTML или innerText, и хотя я могу сделать это для родительского div, я не могу заставить родительский div работать в зависимости от содержимого дочернего элемента.

Добавление после предложения.

Возможно ли, что мой сайт вмешивается? Если я попробую следующее по jsfiddle, он будет вести себя так, как я хочу.

<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> 

по существу, если есть значение, присвоенное selection.text в Див шоу, если либо selection.text не назначается или присваивается пустая строка, то DIV не показывает.

Когда я пытаюсь это сделать на сайте, я получаю следующий код.

(1) Когда selection.text = "Я должен быть виден"

<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) Когда 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) делает то, что он должен do и не отображать, (1) должен отображаться как ng-show = «Я должен быть видимым», но код сгенерировал стиль = «display: none»;

Любая помощь пожалуйста?

Answer 1

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

Похоже, что это приводит к двойной интерполяции. {{ }} предназначен для интерполяции выражения в HTML, это необязательно, когда мы уже находимся в месте, где Angular ожидает выражение.

Вы должны изменить его

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

Вы говорите, что первая модель все еще работает на JSFiddle. Не знаю, почему. Может быть, другая версия Angular? В любом случае второй шаблон должен работать для всех ситуаций.