css:

1
2
3
4
.active{
  color: red;
  font-weight: bold;
}

html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
  <li>
    <span class="icon icon-up" ng-click="toggleClass($event)"></span>
    <span class="icon icon-down" ng-click="toggleClass($event)"></span>
  </li>
  <li>
    <span class="icon icon-up" ng-click="toggleClass($event)"></span>
    <span class="icon icon-down" ng-click="toggleClass($event)"></span>
  </li>
  <li>
    <span class="icon icon-up" ng-click="toggleClass($event)"></span>
    <span class="icon icon-down" ng-click="toggleClass($event)"></span>
  </li>
</ul>

js部分：

1
2
3
4
$scope.toggleClass = function(event){
  $(event.target).addClass('active').sibings().removeClass()
    .parent().siblings().find('span').removeClass('active');
}

完成！