AngularJS – 如何使用ng-if没有HTML元素
有没有办法告诉AngularJS不要显示具有ng-if指令的顶层HTML元素。 我想angular只显示子内容。
Angular Code：
<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/ 。 我不想在HTML中使用#div1 。 我只想要#div2,3,4如果checked是true 。
可能的解决scheme可以添加ng – 如果对所有的子元素，但我不想这样做。
有一个目前没有logging的一对指令， ng-if-start和ng-if-end ，你可以使用这个指令。 它们的行为类似于logging的ng-repeat-start和ng-repeat-end指令，如果你愿意，你可以看到它们的unit testing 。
例如，给出以下代码：
<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指令，它们的工作方式与你期望的完全一样。
如果您很高兴创build自定义指令，则可以通过编程方式将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(); } } } } })
Angular Code：
<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/
我不明白为什么你不想使用父母的div，但是如果你有+20 div，这将是一个很好的解决scheme：
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'} } });
这是一个Angular 1.21解决scheme：
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 。
试试这个： – 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>
编辑：-
使用angularjs和jQuery： – http://jsfiddle.net/adiioo7/9mgTS/3/
将一个公共类（例如myClass ）分配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>
似乎是一个老问题，但我有类似的要求
<div ng-if="checked" id="div1"> <div id="div2">ABC</div> <div id="div3">KLM</div> <div id="div4">PQR</div> </div>
我是这样pipe理的
<mytag ng-if="checked" id="div1"> <div id="div2">ABC</div> <div id="div3">KLM</div> <div id="div4">PQR</div> </mytag>
其中mytag只是不是一个html元素的名称，只要它不打扰布局，这对我的作品
