How to hide content in AngularJS, without changing markup

Question

I have a PHP app that has some AngularJS pages.

I want to re-use one of the templates in a different Angular controller, and use Angular to hide some content based on values of drop downs.

I don't want to have to repeat myself and make an almost identical template with the ng-hide in there, as I'd end up making multiple copies of the content and risk things getting out of step when changes are made.

The other places where the templates are used do not and will not have the methods defined to hide and show based on the drop downs. How do I hide and show content in Angular, without using ng-hide etc? Do I need to make dummy controller methods to avoid errors? Surely there's a better way?

did you consider using ng-if ? you would not have to change your tags, just add one around — sam
– sam, Commented Dec 15, 2014 at 10:36
I think he included ng-show when talking about nghide, that;'s the same thing basically — sam
– sam, Commented Dec 15, 2014 at 10:37
Why not creating a directive that encapsulate your template ? You'll be able to reuse it as many time as you want, and there won't be any multiple copy? — tanou
– tanou, Commented Dec 15, 2014 at 10:51

marapet · Accepted Answer · 2014-12-15 10:56:15Z

1

You could use ng-if together with a bool variable which you only define and set to false where you want to hide that control:

<div ng-if="showTheDiv !== false"></div>

As long as $scope.showTheDiv is not defined or set to true, the content will be shown. Therefore, if you need to hide it somewhere, just be sure to set this value.

A better solution would be to encapsulate repeating parts in a directive which you then will be able to reuse, and add some parameters with reasonable defaults.

answered Dec 15, 2014 at 10:56

marapet

56.9k13 gold badges176 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hippyjim Over a year ago

Thanks - the "if" thing makes sense here - so you can get away with checking the value of something that doesn't exist?

marapet Over a year ago

Yes, angular expressions are very forgiving, instead of ReferenceError and TypeError, you'll get undefined/null

Collectives™ on Stack Overflow

How to hide content in AngularJS, without changing markup

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related