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

Question

I have the following in a view file:

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

When tab1 is selected, the information is displayed correctly. However when on tab2, it appears that <p> element in both spans is being displayed - an empty value in displayed for the <p> element related to tab1. By looking at the DOM tree it also seems that when on tab2, the ng-if condition is not displaying: . Can anyone see where the issue may be? Let me know if more code is required.

Post a complete example reproducing the problem, as a plunkr. Look at your console for an error. — JB Nizet, Dec 31 '15 at 16:11
shouldn't be in a according to HTML5 specs. Change the to a
and see what happens. — jbrown, Dec 31 '15 at 16:24

jbrown · Accepted Answer · 2015-12-31T16:41:39.600

The "p" shouldn't be in a "span" according to HTML5 specs. Change the "span" to a "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 showing empty DOM element when condition is not true

1 Answers1