Inserindo elemento condicionalmente no angularjs (ng-if)

image_pdfimage_print

Temos nativo no angularjs o ng-show e ng-hide, que é utilizado para mostrar ou esconder um elemento no dom. O que ele faz é utilizar a propriedade css “display:none” para esconder o elemento, mas o ele ainda continuará no dom.

Em algumas cituações pode ser conveniente remover completamente o elemento do dom caso uma certa condição não seja satisfeita. Para isto criamos uma directive.


angular.module('app',[])
.directive('ngIf', function() {
	return {
		link: function(scope, element, attrs) {
			if(scope.$eval(attrs.ngIf)) {
				 // remove '<div ng-if...></div>'
				 element.replaceWith(element.children())
			 } else {
				 element.replaceWith(' ')
			 }
		 }
	 }
});

E no html você escreverá algo do tipo:


<div ng-if="condition">
	<p>If condition === true show-me, else take-me dow from dom</p>
</div>

Veja isto na prática acessando http://jsfiddle.net/csbenjamin/mvcEQ/7/

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!