javascript - example - AngularJS-Cómo usar ng-if sin elemento HTML

ngif ionic

Question

¿Hay alguna manera de decirle a AngularJS que no muestre el elemento HTML superior que tiene la directiva ng-if ? Quiero angular para mostrar contenido infantil solamente.

Código Angular:

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

HTML renderizado:

 <div id="div1">
<div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>
</div>

Lo que quiero:

 <div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>

Aquí hay un violín. http://jsfiddle.net/9mgTS/ . No quiero #div1 en HTML. Solo quiero #div2,3,4 si está checked es true .

Una posible solución puede ser agregar ng-if a todos los elementos secundarios, pero no quiero hacer esto.

Answer 1

Prueba esto: - http://jsfiddle.net/adiioo7/9mgTS/1/

div1 es el contenedor principal para div2,div3,div4 , si no desea que div1 en la salida html use esto:

<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>

EDITAR:-

Usando angular js y jQuery: - http://jsfiddle.net/adiioo7/9mgTS/3/

Asigne una clase común (por ejemplo, myClass ) a todos los elementos pertenecientes a ese grupo.

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>

Answer 2

Aquí hay una solución 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 .

Answer 3

Hay un par de directivas actualmente no documentadas, ng-if-start y ng-if-end , que puede usar para esto. Se comportan de manera análoga a las directivas documentadas ng-repeat-start y ng-repeat-end , y puede ver las pruebas de unidad para ellas si lo desea.

Por ejemplo, dado el siguiente código:

<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>

Los primeros cuatro li s se mostrarán y los últimos cuatro li s estarán ocultos.

Aquí hay un ejemplo en vivo en CodePen: http://codepen.io/anon/pen/PqEJYV

También hay directivas ng-show-start y ng-show-end que funcionan exactamente de la forma que usted esperaría.

Answer 4

No entiendo por qué no quieres usar un div padre, pero esta sería una buena solución si tienes +20 divs:

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''}
}
});

Answer 5

Parece ser una vieja pregunta pero tengo un requisito similar

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

Me las arreglé así

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

donde mytag es cualquier nombre que no sea un elemento html siempre que no altere el diseño, esto funciona para mí

Answer 6

Si está feliz de crear una directiva personalizada, puede aplicar el ng-if a los hijos mediante programación y aplanar el DOM en el proceso:

Código de Directiva:

.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();
}
}
}
}
})

Código Angular:

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

HTML renderizado:

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

Fiddle: http://jsfiddle.net/o166xg0s/4/