javascript - example - AngularJS-Cómo usar ng-if sin elemento HTML
ngif ionic (6)
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>
¿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.
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 .
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.
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''}
}
});
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í
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/