javascript - Hide any html element with Angularjs - Stack Overflow

admin管理员组

文章数量:1310143

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?

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?

• javascript
• html
• angularjs

Share Improve this question Follow edited Aug 30, 2015 at 10:14 Jeroen 63.8k4646 gold badges228228 silver badges366366 bronze badges asked Aug 27, 2015 at 20:16 ProgsProgs 73788 gold badges2929 silver badges6767 bronze badges 7

• 2 try ng-show/ng-hide or ng-if – ajmajmajma Commented Aug 27, 2015 at 20:20
• Hi man I have an answer that may help you: stackoverflow./questions/32217484/… if you need something more specific just let me know... – Leo Javier Commented Aug 27, 2015 at 20:21
• 3 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 Commented Aug 27, 2015 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 Commented Aug 27, 2015 at 20:34
• @Claies what i should use, jquery? – Progs Commented Aug 27, 2015 at 20:35

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

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

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 pleteness 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./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./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>

it can be done much easier

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

本文标签： javascriptHide any html element with AngularjsStack Overflow