Remove Class AngularJS

Question

Spent some time searching for an answer to this, grabbed a few lines of different sample code and it just errors out as well.

Goal:

Click a button > button adds class "active" to a div. Inside the div.active there is another element with a function to remove .active from div.active

HTML:

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <button ng-click="slidePanel='active'">Open Div 1</button>
    <div class="div1" ng-class="slidePanel">
        <div class="close" ng-click="removeActive()">Close</div>
        Hi I'm a Slide Panel
    </div>
  </div>
</body>

JS:

 angular.module('myApp', [])
.controller('myCtrl', ['$scope', function ($scope) {

$scope.removeActive = function () {

    //Errors with Element is not defined
    /*var myEl = angular.element(element.getElementsByClassName('div1'));
    myEl.removeClass('active');*/


    //Errors with myEl.removeClass is not a function
    var myEl = document.getElementsByClassName('div1');
    myEl.removeClass('active');

    //Errors with [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!
    /*var myEl = angular.element('div1');
    myEl.removeClass('active');*/



    //Errors with Element is not defined
    /*var query = element[0].querySelector('.div1');
    var wrappedQueryResult = angular.element(query);
    query.removeClass('active');*/

}
}]);

Not sure what I'm doing wrong here.

FIDDLE

charlietfl · Accepted Answer · 2015-09-25 23:16:48Z

1

Solution is simpler if you use object syntax for ng-class

    <button ng-click="slidePanel=!slidePanel">Toggle Div 1</button>
    <div class="div1" ng-class="{active:slidePanel}">
        <div class="close" ng-click="slidePanel=!slidePanel">Toggle</div>
        Hi I'm a Slide Panel
    </div>

DOM manipulation should not be done in a controller. Always think scope first, angular has a huge array of tools to manage the dom based on scope models

What ng-class="{active:slidePanel} is doing is toggling the class active based on the expression slidePanel

DEMO

edited Sep 25, 2015 at 23:16

answered Sep 25, 2015 at 23:13

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wsfuller Over a year ago

The issue is I can't use ng-click="slidePanel=!slidePanel" in this particular instance. The reason is, once you click that button the div.active will slide over top. So would a custom directive be needed in this situation?

charlietfl Over a year ago

I did that for code simplification but it could be a function also that changes a scope variable or triggers an event or updates a service object

Matthew Clise · Accepted Answer · 2015-09-25 23:24:04Z

0

If you don't want to use object notation (which would be my preferred method), you could also just set slidePanel back to an empty string to remove the class.

<div class="close" ng-click="slidePanel=''">Close</div>

answered Sep 25, 2015 at 23:24

Matthew Clise

1913 bronze badges

Collectives™ on Stack Overflow

Remove Class AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related