Есть ли способ, чтобы сказать в AngularJS, чтобы не выводить в топ HTML-элемент, который имеет НГ-если директива. Я хочу, угловых для отображения только содержания ребенка.
Угловой Код:
<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>
Здесь-это скрипка.
. Я не хочу#див1
в HTML. Я просто хочу, чтобы #див2,3,4
Если проверено
в true
.
Возможным решением может быть добавление НГ-если все элементы ребенка, но я не хочу этого делать.
Там's в настоящее время-недокументированные пары директив, НГ-если-старт " и " НГ-если-конца, которые вы можете использовать для этого. Они ведут себя аналогично документально [
НГ-повтор-иng-repeat-end
](https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points) директивы, и вы можете увидеть модульных тестов для 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>
первые четыре ли будут показаны и Финал четырех
ли будут скрыты.
Здесь'ы живой пример на сайт CodePen: http://codepen.io/anon/pen/PqEJYV
Есть также НГ-шоу-старт " и " НГ-шоу-конец
директив, которые работают именно так, как вы ожидали бы их.
Если вы готовы создать пользовательский директива, вы можете применить НГ-если с детьми программно и разогнуть дом в процессе:
Код Директивы:
.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>
Скрипка:
Здесь'ов угловой 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][1].
Я не понимаю, почему вы не хотите использовать родительский div, но это было бы хорошее решение, если у вас +20 ДИВС:
В формате HTML
<div ng-repeat="div in divs" ng-if="checked" id="{{div.name}}">{{div.content}}</div>
Яш
app.controller('myCtrl', function($scope) {
$scope.checked = true;
$scope.divs = {
{'name': 'div2', content:'ABC'},
{'name': 'div3', content:'KLM'},
{'name': 'div4', content:'PQR'}
}
});
див1
является родительским контейнером для див2,3 дивизиона,4 дивизиона, если вы Don'т хотите, див1
в выходной поток 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>
Редактировать:-
Присвоить общий класс (например класса MyClass
), чтобы все элементы, относящиеся к этой группе.
Яш:-
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>
Я такой
<mytag ng-if="checked" id="div1">
<div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>
</mytag>
где тег - любое имя, которое не является HTML-элемент, пока он не нарушает макет, это работает для меня