有没有办法告诉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,但我不想这样做。
发布于 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
指令,它们的工作方式完全符合您的期望。
发布于 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>
发布于 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);
});
}
};
}
};
});
https://stackoverflow.com/questions/19721395
复制相似问题