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树，似乎在tab2时，ng-if条件未显示：。任何人都可以看到问题出在哪里？如果需要更多代码，请告诉我。

Answer 1

＆＃34; p＆＃34;不应该在＆＃34; span＆＃34;根据HTML5规范。改变＆＃34; span＆＃34;到了＆＃34; div＆＃34;。

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

1 个答案: