ng-repeat fails on a p>div structure, but works for a div>div structure?-CodePudding

I'm maintaining a legacy product, and found a quirk that I haven't seen before in AngularJS.

As demonstrated in this Plunker, the following HTML fails to render:

<p ng-repeat="item in items">
  <div>{{item.type}}</div>
</p>

while this renders just fine:

<div ng-repeat="item in items">
  <div>{{item.type}}</div>
</div>

Is there any explanation as to why this might be the case?

I was rather caught off-guard with this, as I don't recall seeing anything about this in the development resources.

CodePudding user response：

It most likely is due to the fact that the HTML spec specifies that for a <p> immediately followed by a <div>, the close tag is optional.

I would assume this means that somehow the browser silently ignores the presence of any explicit source-specified </p> tag. I'd guess that when ng-repeat is parsing the source, it then cannot find the end of the repeated section, and therefore cannot render as expected.