Question

我想使用angular来显示/隐藏或删除父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将填充数据。有时这些特定的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分配了一个值，则div显示，如果未指定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）正在做它应该做的事情而不是显示，（1）应该显示为ng-show =“我应该是可见的”但是代码生成了一个style =“display：none;”

请帮忙吗？

Answer 1

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

这看起来会导致双重插值。 {{ }}用于将表达式插入到HTML中，当我们已经在Angular期望表达式的位置时，它不是必需的。

您应该将其更改为

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

你说第一个模式仍然适用于JSFiddle。不知道为什么。也许是不同版本的Angular？无论哪种方式，第二种模式都适用于所有情况。

ngAngular-js如果子元素为空，则隐藏父元素

1 个答案: