ng-if 在条件不为真时显示空 DOM 元素

Question

我在视图文件中有以下内容：

  <p class="presentation black">Sections:
    <span data-ng-if="currentTab == 'tab1'">
      <div ng-repeat="question in filtered = (template.questions | unique:'sectionName')"></div>
      <p class="presentation black">{{filtered.length}}</p>
    </span>
    <span data-ng-if="currentTab == 'tab2'">
      <div ng-repeat="sheet in filtered = (template.sections[0].sheets | unique:'name')"></div>
      <p class="presentation black">{{filtered.length}}</p>
    </span>
  </p>

选择tab1时，信息显示正确。但是，当在 tab2 上时，似乎正在显示两个跨度中的 <p> 元素 - 显示与 tab1 相关的 <p> 元素的空值。通过查看 DOM 树，在 tab2 上似乎也没有显示 ng-if 条件：。任何人都可以看到问题出在哪里吗？让我知道是否需要更多代码。

Answer 1

根据 HTML5 规范，"p" 不应在 "span" 中。将 "span" 更改为 "div".

HTML

<p class="presentation black">Sections:
   <div data-ng-if="currentTab == 'tab1'">
     <div ng-repeat="question in filtered = (template.questions | unique:'sectionName')"></div>
     <p class="presentation black">{{filtered.length}}</p>
   </div>
   <div data-ng-if="currentTab == 'tab2'">
     <div ng-repeat="sheet in filtered = (template.sections[0].sheets | unique:'name')"></div>
     <p class="presentation black">{{filtered.length}}</p>
   </div>
</p>

ng-if 在条件不为真时显示空 DOM 元素

ng-if showing empty DOM element when condition is not true

angularjs

angular-ng-if

angularjs-ng-if