angularjs - 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>正在显示两个跨度中的元素 - 为<p>与 相关的元素显示一个空值tab1。通过查看 DOM 树，似乎在 on 时tab2，ng-if条件未显示：<!-- end ngIf: currentTab == 'tab2' -->。谁能看到问题可能出在哪里？如果需要更多代码，请告诉我。

Answer 1

根据 HTML5 规范，“p”不应处于“跨度”中。将“跨度”更改为“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>