1

I'm applying two css classes onto my html, when I click on my span element.

right now I have a border and looks fine, I want keep this.

but: so If I click in the Icon I said in the icon <i> the Icon color change for blue.

but I don't want remove the functionality of the span who contains the border.

thanks.

html + angular

<div ng-app>
  <div>
    <br>
    <i ng-class='{"gamepad-red":tog==1}' class="fa fa-lg fa-gamepad"></i>
    <span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span>
  </div>

  <div>
    <br>
    <i ng-class='{"gamepad-red":tog==2}' class="fa fa-lg fa-gamepad"></i>
    <br/><span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>
  </div>
</div>

css:

.myclass {
  border: dotted pink 3px;
}

.gamepad-red {
  color: red;
}

.gamepad-blue {
  color: blue;
}

jsfiddle: http://jsfiddle.net/zvLvg/286/

Improve this question
11
  • you must invert simple quotes and double quotes : ng-class="{'myclass':tog==2}" Commented Jul 5, 2016 at 14:28
  • I did not understand can you provide a jsfiddle? the code above is working, do u understand what I am trying to archive? Commented Jul 5, 2016 at 14:31
  • @noob-fella There's a fiddle link - at the bottom Commented Jul 5, 2016 at 14:32
  • yes the is the one I did provide :) Commented Jul 5, 2016 at 14:33
  • @noob-fella Oh, sorry :) Commented Jul 5, 2016 at 14:35

1 Answer 1

Reset to default
1

I have moved the effect of the span click to the wrapping div and used parent-child CSS to apply the red to the i element.

On click of the icon it triggers a separate boolean that controls a local class

iTog1 and iTog2 can be made to behave similar to tog if there can only be one selected

.selected-gamepad > span {
  border: dotted pink 3px;
}

.selected-gamepad > i {
  color: red;
}

.gamepad-blue,
.selected-gamepad .gamepad-blue{
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<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'>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'>span 2</span>
  </div>
</div>

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

7 Comments

thanks a lot, almost :), what I want to do is when the control is click straight way change for blue color understand? just apply that classses in the icon, I dont need border at span in that case, I was clear, I did edit my question. thank you again
Code updated. I think this has what you're looking for
sorry me here again, just the last thing, everything is working fine perfect, but when the icon is blue if I click in span the icon keeps blue and will be possible when I click in span the icon change to red? thank you
Changing ng-click='tog=2' to ng-click='tog=2; iTog2 = false;' (and similar for iTog1) should do it. I would recommend moving the click functionality to the javascript controller if you're adding more complexity
perfect, works, u are the best, do u want update the question? anyway thanks a lot.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.