Remove element from html AngularJS

Question

I'm trying to show or hide a div using ng-if directive in AngularJS. It works but it still appears in the html source code.

How can I completely remove the div from the html? This is how I'm doing it:

<div ng-if="user != null && user != 'Error'">CONTENT</div>

Thanks!

ng-if is meant to add/remove the element from the DOM, so what you're doing should work. Can you post your code? — Joe Clay
– Joe Clay, Commented Feb 27, 2016 at 17:55
I just edited the post with the piece of code I have. Thanks! — Bruno
– Bruno, Commented Feb 27, 2016 at 17:58

Louie Almeda · Accepted Answer · 2016-02-27 18:25:56Z

3

How can I completely remove the div from the html?

AngularJS' ng-if Places a comment wrapping your element, so if ng-if evaluates to false, your element is removed but it is marked with the comment.

AngularJS runs on the client, so your template(html) will look how you code it. It evaluates and manipulates your template on the browser, unlike MVCs that you can do with ASP MVC and PHP which will construct the html on the server and send it to the client 'ready', AngularJS needs the 'raw' template, and do the manipulation in the client side. So looking in the view source will not show you how angularjs manipulated your template, you can look at it using the developer tools

edited Feb 27, 2016 at 18:25

answered Feb 27, 2016 at 18:05

Louie Almeda

5,67035 silver badges41 bronze badges

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

2 Comments

Bruno Over a year ago

I'm not sure if I understand. If I go to the view-source for example in chrome I don't see any comment in the html. I see the same div tag I posted above.

Louie Almeda Over a year ago

Great! No problem :)

Collectives™ on Stack Overflow

Remove element from html AngularJS

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