Angular.js如何在单击时插入css类并删除所有其他类

Question

当我点击我的 span 元素时，我将两个 css 类应用到我的 html 中。

现在我有一个边框，看起来很好，我想保留这个。

但是： 所以如果我点击我在图标<i> 中所说的图标，图标颜色会变为蓝色。

但我不想删除包含边框的 span 的功能。

谢谢。

html + 角度

<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/

Answer 1

我已将 span click 的效果移至包装 div 并使用父子 CSS 将红色应用于 i 元素。

点击图标会触发一个单独的布尔值来控制本地类

如果只能选择一个，则可以使 iTog1 和 iTog2 的行为类似于 tog

.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>