Angular.js how to apply cursor: no-drop in a css class - angularjs

Question

what I am trying to do is: make the cursor:no-drop; using css for this, fine works, but the problem is I am still getting the click when I click in the Icon.
If you see my Icon turn to red and I inserted cursor:no-drop; by css. for the user not be able to click, but the click still on how can I solve this? and block the click when the Icon turns to red?
thank you.
html + angular
<div ng-app>
<div ng-class="{'selected-gamepad':tog==1}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog1}"
ng-click="iTog1 = !iTog1"></i>
<span id='1' ng-click='tog=1; iTog1 = false;'>span 1</span>
</div>
<div ng-class="{'selected-gamepad':tog==2}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog2}" ng-click="iTog2 = !iTog2"></i>
<span id='2' ng-click='tog=2; iTog2 = false;'>span 2</span>
</div>
</div>
css:
.selected-gamepad > span {
border: dotted pink 3px;
}
.selected-gamepad > i {
color: red;
cursor:no-drop;
}
.gamepad-blue,
.selected-gamepad .gamepad-blue{
color: blue;
}
jsfiddle: http://jsfiddle.net/zvLvg/290/

Answer 1

Changing the cursor property in CSS doesn't magically disable clicking - it just changes the cursor so it looks like you can't click. If you want to disable clicking, you need some additional logic in your code.
I've edited the code a bit to clean it up and moved some logic to controller. The code of course could be much better, but I leave it up to you - try to read some tutorials about it and get familiar with cleaner Angular syntax to write better code :-).
Coming back to the problem - what you really needed to do was to block player from clicking, when the pad is selected. I did it by adding a simple checking with if statement inside toggle function:
View:
<div ng-app="app">
<div ng-controller="GameController as vm">
<div ng-class="{'selected-gamepad':vm.tog==1}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[1]}" ng-click="vm.toggle(1)"></i>
<span id='1' ng-click='vm.selectPad(1)'>span 1</span>
</div>
<div ng-class="{'selected-gamepad':vm.tog==2}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[2]}" ng-click="vm.toggle(2)"></i>
<span id='2' ng-click='vm.selectPad(2)'>span 2</span>
</div>
</div>
</div>
Logic:
<script>
// Register module
angular.module('app', []);
// Create controller
angular.module('app')
.controller('GameController', function() {
var self = this;
self.tog = null;
self.iTogs = [false, false];
self.toggle = function(index) {
if (self.tog != index) {
self.iTogs[index] = !self.iTogs[index];
}
}
self.selectPad = function(index) {
self.tog = index;
self.iTogs[index] = false;
}
});
</script>
Here's working plunker:
http://jsfiddle.net/zvLvg/291/
A little explanation
What I did was move some of the logic to controller. Controllers let you separate different parts in the application and have more control over them. Also, the code is much cleaner when you use functions instead of direct expressions inside directives (like you did with ng-click earlier).
I've also created an array instead of naming variables with numbers. Further improvements would be to use ng-repeat to avoid code repetition - divs inside your pads list are pretty much the same and could be substituted with one div and ng-repeat. Also, names of the properties could be better - now they don't really say what they mean if you look at them.
I hope these small tips will help you to get better with Angular and with programming at all. :-)