javascript - AngularJS - 如何在没有 HTML 元素的情况下使用 ng-if

Question

有没有办法告诉 AngularJS 不要显示具有 ng-if 指令的顶部 HTML 元素。我希望 Angular 仅显示子内容。

Angular 代码:

    <div ng-if="checked" id="div1">
      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>
   </div>

呈现的 HTML:

   <div id="div1"> 
      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>
   </div>

我想要的:

   <div id="div2">ABC</div>
   <div id="div3">KLM</div>
   <div id="div4">PQR</div>

这是一个 fiddle 。 http://jsfiddle.net/9mgTS/ .我不想在 HTML 中使用 #div1。我只想要 #div2,3,4 如果 checked 是 true。

一个可能的解决方案是将 ng-if 添加到所有子元素，但我不想这样做。

Answer 1

有一对当前未记录的指令，ng-if-start 和 ng-if-end，您可以使用它们。它们的行为类似于记录的 ng-repeat-start and ng-repeat-end指令，你可以看到 unit tests for them如果你愿意。

例如，给定以下代码:

<ul>
  <li ng-if-start="true">a</li>
  <li>b</li>
  <li>c</li>
  <li ng-if-end>d</li>
  <li ng-if-start="false">1</li>
  <li>2</li>
  <li>3</li>
  <li ng-if-end>4</li>
</ul>

前四个 li 将被显示，最后四个 li 将被隐藏。

这是 CodePen 上的一个实例:http://codepen.io/anon/pen/PqEJYV

还有 ng-show-start 和 ng-show-end 指令完全按照您期望的方式工作。