Toggle class of parent element using ng-click?

Question

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>

Answer 1

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> 

Answer 2

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()
}

Answer 3

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>