动态使侧边栏菜单处于活动状态

Question

我有一个母版页，其中包含侧边栏菜单项和页脚。我正在其他页面中使用此侧边栏。登录后，仪表板菜单突出显示，因为我正在使其处于活动状态。但是在单击其他链接后，我如何使该菜单处于活动状态，因为我使用的是所有页面通用的一个侧边栏。有什么方法可以动态地做到这一点吗？ 还是我必须在每个页面中复制以下代码并使特定菜单项处于活动状态？

<div class="col-xs-12 col-sm-12 col-md-12">
<div class="LeftMenu">
<ul>
<a href="#!/admindashboardhome" title="Dashboard"><li 
class="Active"><span class="glyphicon glyphicon-th"></span>
<span>Dashboard</span></li></a>
<a href="#!/examinationhalltickets" title="Declaration"><li><span
class="glyphicon glyphicon-barcode"></span><span>Examination
Form</span></li></a>
<a href="#!/collegedetails" title="Declaration"><li><span 
class="glyphicon glyphicon-education"></span><span>College 
Details</span></li></a>
<a href="#!/studentdetails" title="Declaration">
<li><span class="glyphicon glyphicon-user"></span><span>Student
Details</span></li></a>
</ul>
</div>
</div>

Answer 1

这应该可以解决问题

.HTML：

<a ng-class="getClass('/admindashboardhome')" href="/admindashboardhome">Dashboard</a>

JavaScript：

$scope.getClass = function (path) {
return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}

.CSS：

.active {
//styling
}