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

Question

有没有办法告诉AngularJS不要显示具有ng-if指令的顶级HTML元素.我希望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>

这是一个小提琴.http://jsfiddle.net/9mgTS/.我不想要#div1HTML.我只是想#div2,3,4,如果checked是true.

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

Answer 1

有一个当前无证对指令的,ng-if-start并且ng-if-end,你可以使用这个.它们的行为类似于文档ng-repeat-start和ng-repeat-end指令,如果您愿意,您可以看到它们的单元测试.

例如,给出以下代码:

<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将显示前四个s,最后四个li将被隐藏.

以下是CodePen的实例:http://codepen.io/anon/pen/PqEJYV

也有ng-show-start和ng-show-end该工作完全相同的方式指令,你会期望他们.

Answer 2

如果您乐意创建自定义指令,可以通过编程方式将ng-if应用于子项并在过程中展平DOM:

指令代码:

.directive('ngBatchIf', function() {
    return {
        scope: {},
        compile: function (elm, attrs) {
            // After flattening, Angular will still have the first element
            // bound to the old scope, so we create a temporary marker 
            // to store it
            elm.prepend('<div style="display: none"></div>');

            // Flatten (unwrap) the parent
            var children = elm.children();
            elm.replaceWith(children);

            // Add the ng-if to the children
            children.attr('ng-if', attrs.ngBatchIf);

            return {
                post: function postLink(scope, elm) {
                    // Now remove the temporary marker
                    elm.remove();
                }
            }
        }
    }
})

角度代码:

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

呈现的HTML:

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

小提琴:http://jsfiddle.net/o166xg0s/4/

Answer 3

试试这个：- http://jsfiddle.net/adiioo7/9mgTS/1/

div1是 的父容器div2,div3,div4，如果您不想div1在输出 html 中使用此：-

<div ng-app="App">Click me:
    <input type="checkbox" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div class="div2" ng-if="checked">ABC</div>
    <div class="div3" ng-if="checked">KLM</div>
    <div class="div4" ng-if="checked">PQR</div>
</div>

编辑：-

使用 Angular js 和 jQuery：- http://jsfiddle.net/adiioo7/9mgTS/3/

myClass为属于该组的所有元素分配一个公共类（示例）。

JS：-

angular.module('App', []);

function myController($scope) {
    $scope.change = function () {
        angular.element(".myClass").toggle();
    };
}

HTML：-

<div ng-app="App" ng-Controller="myController">Click me:
    <input type="checkbox" ng-change="change()" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div id="div2" class="myClass">ABC</div>
    <div id="div3" class="myClass">KLM</div>
    <div id="div4" class="myClass">PQR</div>
</div>