How to rotate arrow from 0 to 180 degrees by clicking, using DOM (Link)

[Elton2]

Hi everyone! How are you?!

There is a select options element in the data-table, but "angle-down" does not rotate 180 degrees when clicked, so I am checking the possibility of using DOM manipulation, like this:

HTML:

  <div class="container-icon">

        <i class="fa fa-angle-down" onclick="rotateAngleDown()"></i>

  </div>

JS (DOM): 

var currentState = 0;

function rotateAngleDown(){

    if(currentState === 0){

        currentState = 180;

        document.querySelector('.fa-angle-down').style.transform = 'rotate(180deg)'

    }else{

        currentState = 0;

        document.querySelector('.fa-angle-down').style.transform = 'rotate(0deg)';

    }

}

In servicenow widgets, we use angular, in this case it would not be "onClick=""", but "ng-Click=""", but, would anyone know how to include this code with DOM in the link? (attached print).

Thanks for your support!

[-O- · Accepted solution]

I would use AngularJS as much as possible and employ conditional style; something along the lines of:

Body HTML template:

<div>
	<input ng-model="rotate" type="checkbox" />
	<div>{{rotate}}</div>
	<div class="container-icon" ng-click="rotate = !rotate">
		<i class="fa fa-angle-down" ng-class="{ 'faceUp': !rotate, 'faceDown': rotate }"></i>
	</div>
</div>

CSS:

.faceUp {
  color: red;
  transform: rotate(0deg);
}

.faceDown {
  color: blue;
  transform: rotate(180deg);
}

Client controller:

api.controller = function ($scope) {
	var c = this;
	$scope.rotate = false;
};

There is a lot of extra stuff in the example, but it will make testing easier.

The idea is that you define a scope property and "link" the style of the element to that property. Then all you have to do is to update that scope property as needed. In this example the scope properties value is tied to clicking the chevron and to marking the check box. One could also define a function on the scope that would do the same:

The modified portion of the Body HTML template:

	...
	<div class="container-icon" ng-click="flipRotate()">
	...

The new Client controller:

api.controller = function ($scope) {
	var c = this;

	$scope.flipRotate = flipRotate;
	$scope.rotate = false;

	function flipRotate () {
		$scope.rotate = !$scope.rotate;
	}
};

[Elton2]

Hello @-O- ! How are you?!

I was studying a much more complex way to include DOM in the Link part of the Widget and it certainly could not work, but your suggestions will be very useful, with the use of Angular (ng-click and ng-class).

This condition with booleans also made me understand everything more clearly.

Thank you very much for your attention, support and for sharing your extensive knowledge with us in the community!

Thanks again!

[-O-]

Hello, I'm fine, thanks!

Hope you are too and you're most welcome 🙂

[-O-]

Also, when dealing with AngularJS one should not access the DOM. You can never know when it works as AngularJS can remove/destroy any time any node you may rely and and replace those with other nodes which will no longer react to or emit events as the ones you originally wired up.