Hide any html element with Angularjs

Question

With a controller I try to hide any html element that is clicked with function call like this:

<div class="well">
     <h4><span class="label label-primary" ng-click="hideThis($event)" id="tag" hidden></span></h4>
     <h4><span class="label label-default" ng-click="hideThis($event)" id="tag2" hidden></span></h4>
</div>

and this script should do the work

var App = angular.module('App', []);

App.controller('appCtrl', function($scope) {
    $scope.hideThis = function($event) {
       $event.target.hide=true;
       //Code I've tried:
       // $event.target.hide();
       // $event.target.hide(true);
    };
});

perhaps I'm not using $event.target.etc properties correctly?

Hi man I have an answer that may help you: http://stackoverflow.com/questions/32217484/show-notification-after-removing-an-item-from-the-list-in-angular/32217993#32217993 if you need something more specific just let me know... — Leo Javier, Aug 27 '15 at 20:21
This is a classic example of trying to program for the DOM rather than for the data, which you should avoid doing in angular. you should be managing the visibility of your data (which you haven't even shown in this sample) rather than the visibility of a DOM element. — Claies, Aug 27 '15 at 20:28
@ajmajmajma LeoJavier not quite useful as i need, those labels are going to be filter tags sometime in the future, i have to create many of those as filters tags the user wants to see(in a table search for example) they have to appear/disappear many times — Progs, Aug 27 '15 at 20:34
no, you should never need jquery except in extreme edge cases. The multiple answers provided should give you an idea of what angular provides to solve your issue. — Claies, Aug 27 '15 at 20:35
your comment to the others isn't exactly clear; since you didn't show your data, it's not really clear at all what these "filter tags" are supposed to do, but they sound like data points, which each can have a visibility Boolean. If you don't think using `ng-show` or `ng-if` will work, I would recommend that you flesh out your question more with your data and expected results. — Claies, Aug 27 '15 at 20:40

score 4 · Answer 1 · answered Aug 27 '15 at 20:33

4

ng-if will remove the element from the DOM; ng-hide will hide the element from the display only.

answered Aug 27 '15 at 20:33

John Manko

1,828
27
51

score 3 · Accepted Answer · edited May 23 '17 at 11:43

The other two answers already have the gist of it, but don't go into much detail on why other options are being suggested. They also don't incorporate how to relate those directives to the fact that you want things to happen on click.

To start by summarizing:

On ng-click your app should change the $scope.
On $scope changes Angular should change DOM element's visibility.

Let me repeat: your app should update the model (e.g. $scope), never the DOM itself. Let the latter be handled by Angular.

To add some more details...

AngularJS is a framework that handles "data binding" for you, meaning it will (and should) take charge of keeping your model (e.g. $scope) and view (the markup) in synch. You should usually not interfere with this behavior, unless there is a very specific reason to do so. A quite lengthy but interesting read on this and related topics can be found in this answer (which incidentally was answered to a question about when it is okay to use jQuery yourself).

Long story short: don't update the DOM inside your controller / scope.

Instead: work declaratively. Make sure that your controller and scope have all the info needed to base view-decisions (e.g. "show" vs "hide") on. Furthermore, make sure that your view is told when to show/hide based on the scope situation.

For completeness sake, let me end by repeating @JohnManko's suggestions, where the examples also show how you could handle ng-click to change the underlying properties.

The first is using ng-if:

var App = angular.module('App', []);

App.controller('appCtrl', function($scope) {
  $scope.isTagOneActive = true;
  $scope.isTagTwoActive = true;
  $scope.hideTag1 = function() { $scope.isTagOneActive = false; }
  $scope.hideTag2 = function() { $scope.isTagTwoActive = false; }
});

h4:hover { cursor: pointer; background-color: pink; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>

<div ng-app="App" ng-controller="appCtrl">
    <h4 ng-if="isTagOneActive" ng-click="hideTag1()" id="tag">Tag One!</h4>
    <h4 ng-if="isTagTwoActive" ng-click="hideTag2()" id="tag">Tag Two!</h4>
</div>

This adds/removes elements from the DOM entirely.

To just let AngularJS toggle visibility, use ng-show and/or ng-hide:

var App = angular.module('App', []);

App.controller('appCtrl', function($scope) {
  $scope.isTagOneActive = true;
  $scope.isTagTwoActive = true;
  $scope.hideTag1 = function() { $scope.isTagOneActive = false; }
  $scope.hideTag2 = function() { $scope.isTagTwoActive = false; }
});

h4:hover { cursor: pointer; background-color: pink; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>

<div ng-app="App" ng-controller="appCtrl">
    <h4 ng-show="isTagOneActive" ng-click="hideTag1()" id="tag">Tag One!</h4>
    <h4 ng-hide="!isTagTwoActive" ng-click="hideTag2()" id="tag">Tag Two!</h4>
</div>

Diana R · Answer 3 · 2015-08-27T20:35:13.333

0

it can be done much easier

 <span class="label label-default" ng-show="showTag2=!showTag2"  id="tag2" />

edited Aug 27 '15 at 20:35

answered Aug 27 '15 at 20:31

Diana R

1,174
1
9
23

the example, and your answer, are both missing something to change the visibility, i.e. `ng-show`, `ng-hide`, `ng-if`, etc.... – Claies Aug 27 '15 at 20:33
Sorry my mistake.Yeah, ng-click should have been ng-show, Will edit to fix it. – Diana R Aug 27 '15 at 20:34

Hide any html element with Angularjs

3 Answers3