0

I'm doing a menu as shown below

  1. how should I use ng-class to control the selected element's css
  2. the round dot on the right side is a span, how can I show it when corresponding li is selected, also hide when other li selected.

enter image description here

a part of my html code:

 <li layout="row" layout-align="start center">
      <div flex="initial" layout="column" layout-align="center center">
        <span class="docs-upper-icon"></span>
        <span class="docs-lower-icon docs-lower-icon-1"></span>
      </div>
      <a flex href="#/masters" layout="row" layout-align="start center"><h2>Masters</h2></a>
      <span class="docs-menu-deco-icon"></span>
  </li>
Phil
  • 157,677
  • 23
  • 242
  • 245
vincentf
  • 1,419
  • 2
  • 20
  • 36
  • 1
    are you using `ngRoute`, `ui-router` or something else? – Manasov Daniel Jan 27 '16 at 04:23
  • definitely simple in ui-router .. `ui-sref-active="active-class"` – charlietfl Jan 27 '16 at 04:24
  • You should ask a specific question, and describe what you tried, what you expect to happen and what is actually happening. You are just asking people to write code for you, which is not what SO is for. – Shaun Scovil Jan 27 '16 at 04:24
  • @ManasovDaniel I'm using ngRoute – vincentf Jan 27 '16 at 04:26
  • @ShaunScovil I'm not asking for code. I'm new, just totally no idea about how the logic should be. for example if somebody can tell me which variables I should define in the controller to control ng-show and ng-class – vincentf Jan 27 '16 at 04:31
  • Have you read the docs for ngClass? (Not being snarky, just want to get a sense for what steps you've taken so far...) https://code.angularjs.org/1.4.8/docs/api/ng/directive/ngClass – Shaun Scovil Jan 27 '16 at 04:34
  • set your styles to class `active`. To check is link active - http://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs/12306136#12306136 – Manasov Daniel Jan 27 '16 at 04:43
  • @ShaunScovil I've read the ng-class examples, but still confused. for this menu I don't know what the event(trigger the new class)should be, and how to cancel the the applied class when selecting other li. – vincentf Jan 27 '16 at 04:52
  • @Phil thanks so much, this is what I really want to ask :) – vincentf Jan 27 '16 at 05:02
  • @ManasovDaniel thanks – vincentf Jan 27 '16 at 05:03

0 Answers0