59

有没有办法告诉 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/。我不想#div1在 HTML 中。我只想要#div2,3,4if checkedis true。

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

4

6 回答 6

55

有一对当前未记录的指令，ng-if-startand 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将被显示，最后四个li将被隐藏。

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

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

于 2015-06-28T14:44:58.780 回答
7

如果您乐于创建自定义指令，则可以以编程方式将 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/

于 2015-02-24T12:44:54.807 回答
0

这是一个 Angular 1.21 解决方案：

HTML：

<div ng-app="app" ng-controller="ctrl">
    <div ng-iff="checked" id="div1">
        <div id="div2">ABC</div>
        <div id="div3">KLM</div>
        <div id="div4">PQR</div>
    </div>
    <button ng-click="toggleCheck()">Toggle Check</button>
</div>

JAVASCRIPT：

angular.module('app', []).
controller('ctrl', function ($scope) {
    $scope.checked = true;

    $scope.toggleCheck = function () {
        $scope.checked = !$scope.checked;
    };
}).
directive('ngIff', function ($compile) {
    return {
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    var bindingElem = iElement.attr('ng-iff');
                    var children = iElement.children();

                    angular.forEach(children,function(c){
                        angular.element(c).attr('ng-if',bindingElem);
                    });

                    $compile(children)(scope, function(newElem){
                        iElement.replaceWith(newElem);
                    });
                }
            };
        }
    };
});

JSFIDDLE。

于 2015-06-12T04:45:10.577 回答
-1

我不明白你为什么不想使用父 div，但如果你有 +20 个 div，这将是一个很好的解决方案：

HTML

   <div ng-repeat="div in divs" ng-if="checked" id="{{div.name}}">{{div.content}}</div>

JS

app.controller('myCtrl', function($scope) {
    $scope.checked = true;
    $scope.divs = {
         {'name': 'div2', content:'ABC'},
         {'name': 'div3', content:'KLM'},
         {'name': 'div4', content:'PQR'}
    }
});
于 2014-06-16T08:30:09.597 回答
-1

似乎是一个老问题，但我有类似的要求

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

我是这样管理的

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

其中mytag只是任何不是 html 元素的名称，只要它不干扰布局，这对我有用

于 2015-06-12T04:13:41.953 回答
-2

试试这个：- 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>

编辑：-

使用角度 js 和 jQuery：- http://jsfiddle.net/aiioo7/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>
于 2013-11-01T05:48:38.647 回答