javascript - AngularJS 这种菜单效果怎么做

Question

界面如上图
下面是我每个<li>的代码：

    <li layout="row" layout-align="start center">
      <p flex="initial" layout="column" layout-align="center center">
        <span class="docs-upper-icon"></span>
        <span class="docs-lower-icon docs-lower-icon-1"></span>
    </p>
      <a flex href="#/masters" layout="row" layout-align="start center"><h2>Masters</h2></a>
      <span class="docs-menu-deco-icon"></span>
   </li>

1， 请问怎么用ng-class做菜单变色效果，选中一项以后另一项自动取消。
2， 右边的半圆是单独的span标签，请问怎么选中以后show，选中其他项后hide

Answer 1

1. element:focus

2. 解决方案很多，简单的话，你可以给每个li都填加上span, 然后根据焦点控制ng-show

Answer 2

参考http://segmentfault.com/q/1010000004365288的答案

Answer 3

解决了
http://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs/12306136#12306136