изменить цвет текущей страницы angularjs

Question

Помогает ли AngularJS каким-либо образом настраивать активный класс на ссылку для текущей страницы?

Я предполагаю, что в angularjs или css есть какой-то магический способ, но я не могу найти.

Мое меню выглядит следующим образом:

<ul> 
 
<li ><a href="#/person" ng-click = "person()" id="bl" >Person</a></li> 
 
<li><a href="#/product" ng-click = "product()" id="or" >Product</a></li> 
 
<li ><a href="#/place" ng-click = "place()" id="gr" >Place</a></li> 
 
</ul><br/><br/>

мой CSS выглядит следующим образом:

body { 
 
font-family: Source Sans Pro; 
 
} 
 

 
ul { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
} 
 

 

 
a{ 
 
    float: left; 
 
    width: 6em; 
 
    text-decoration: none; 
 
    padding: 0.2em 0.6em; 
 
    border-right: 1px solid white; 
 
\t 
 
} 
 

 
#navbar li a.current { 
 
background-color: #FFF;} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
#bl { 
 
background-color:#5a5a5a; 
 
color: yellow; 
 
} 
 

 
#or { 
 
background-color:#5a5a5a; 
 
color: yellow; 
 
} 
 

 
#gr { 
 
background-color : #5a5a5a; 
 
color: yellow; 
 
} 
 

 
#bl:hover ,#or:hover , #gr:hover { 
 
background-color:#ff6900; 
 
} 
 
    
 
#persons{ 
 
float:left; 
 
} 
 
    
 
.left{ 
 
float:left; 
 
} 
 

Answer 1

Похоже, у вас есть функции человека(), продукт(). Установите фоновый цвет, используя getElementsByName('body').style.backgroundColor = 'red'; и соответствующие цвета в соответствующих функциях.

Answer 2

Вы можете использовать https://docs.angularjs.org/api/ngRoute/service/ $ обслуживание маршрута, чтобы получить/обнаружить текущий маршрут и установить некоторые class в вашем li или a теге использовать CSS, чтобы их стиль на основе класса вы установили.