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?

Answer 1

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

Answer 2

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 (eg $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 (eg $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 (eg "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> 

Answer 3

可以轻松完成

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