CODEWITHSUNDEEP
javascriptjqueryangularjs
Rory
Rory

Reputation: 838

Toggle class of parent element using ng-click?

I have some javascript that I'm trying to convert into Angular:

$('.col-lg .fa-clock-o').click(function(e){
    $(this).parent().toggleClass('set-time');
    e.preventDefault()
});

I've tried adding the following to the child element containing the link, but it doesn't work, maybe theres a proper 'angular' way to do this instead?

<a href="#" class="fa fa-clock-o" aria-hidden="true" ng-click="$(this).parent().toggleClass('set-time')"></a>

Upvotes: 0

Views: 1740

Answers (3)

iamalismith
iamalismith

Reputation: 1571

A more 'Angular' way to do this would be to set a variable which represents whether or not the set-time class is present on the parent element. By default this would be undefined which is falsy.

Then to toggle it in your ng-click you can just set the value to be the opposite of what it currently is. 

<div ng-class="{'set-time': setTimeClass}">
    <a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>

Here's a working example:

var app = angular.module('app', []);
.set-time {
 background :red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
     <div ng-class="{'set-time': setTimeClass}">
        <a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
    </div>
    
</div>

Upvotes: 3

mate.gvo
mate.gvo

Reputation: 1182

Parent is not a function, it's a prototype:

Correct usage is: $(this).parent

And your anchor element:

<a href="#" class="fa fa-clock-o" aria-hidden="true" ng-click="$(this).parent.toggleClass('set-time')"></a>

Upvotes: 0

Rory
Rory

Reputation: 838

The following works, but not sure its the angular way:

HTML:

<a href="#" class="fa fa-clock-o" aria-hidden="true" ng-click="$ctrl.toggleTimepickerPopup($event)"></a>

Controller:

public toggleTimepickerPopup(event : any) : void{
    jquery(event.target).parent().toggleClass('set-time');
    event.preventDefault()
}

Upvotes: 0

Related Questions