CODEWITHSUNDEEP
javascripthtmlcssangularjs
Zee
Zee

Reputation: 8488

How to hide element even from HTML source code?

In a webpage that I am building I am using AngularJS ng-hide to show-hide an element(basically a button). But what it actually does is simply add a class ng-hide to that element.

So anybody can go to developer tools and remove the class ng-hide and the button will be visible. I know using jQuery I can completely remove the element from HTML but is there a way to do that in angular?

Before it looks like this:

<button ng-hide="hide">Button</button>

And after hiding it looks like:

<button class="ng-hide">Button</Button>

Upvotes: 2

Views: 1332

Answers (2)

OddDev
OddDev

Reputation: 3734

This should work:

angular.element("button").remove();

Upvotes: 0

Andy Gaskell
Andy Gaskell

Reputation: 31761

You are looking for ngIf.

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
  This is removed when the checkbox is unchecked.
</span>

Upvotes: 5

Related Questions