Search code examples
angularjsangular-ng-if

Remove element from html AngularJS

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!

Solution

  • 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