change color of current page angularjs

Question

Does AngularJS help in any way with setting an active class on the link for the current page?

I imagine there is some magical way in angularjs or css this is done, but I can't seem to find.

My menu looks like:

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

my css looks like:

 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; } #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

Looks like you have functions person(), product(). Set background-color by using getElementsByName('body').style.backgroundColor = 'red'; and respective colors in respective functions.

Answer 2

你可以使用https://docs.angularjs.org/api/ngRoute/service/ $航线的获取/检测当前的路由，并设置一些class在你li或a则标签使用CSS基于类你他们的风格组。