AngularJS -如何使用不带HTML元素的ng-if
AngularJS -如何使用不带HTML元素的ng-if
提问于 2013-11-01 13:38:14
有没有办法告诉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。如果checked是true，我只想要#div2,3,4。
一种可能的解决方案是向所有子元素添加ng-if，但我不想这样做。
回答 6
Stack Overflow用户
发布于 2015-06-28 22:44:59
有一对目前没有文档记录的指令，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指令，它们的工作方式完全符合您的期望。
Stack Overflow用户
发布于 2015-02-24 20:44:55
如果您乐于创建自定义指令，则可以通过编程方式将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>Stack Overflow用户
发布于 2015-06-12 12:45:11
下面是一个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);
});
}
};
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19721395
复制相关文章
相似问题
腾讯云开发者
