我正在使用
JSON服务列出菜单项(链接).当导航不同的路线/页面时,我希望将“活动”类添加到当前活动的链接(即用户所在的页面).
我用这个jsfiddle作为起点：http://jsfiddle.net/p3ZMR/4/@H_301_2@
我在stackoverflow上也找到了几个答案,但它们都与上面的解决方案类似.@H_301_2@
但是,如果链接是通过ng-repeat生成的,那么该解决方案不起作用：@H_301_2@
<ul class="main-menu">
<li ng-repeat="page in pages">
<a href="/#/{{page.id}}" active-link="active">{{page.name}}</a>
</li>
</ul>
主要的编程概念是关注点的分离.我个人不喜欢在我的观点中保持逻辑或比较.我宁愿在javascript中保持业务逻辑和比较
HTML@H_301_2@
<ul class="main-menu">
<li ng-repeat="page in pages">
<a ng-click="menu(page)" ng-class="{ active: isActive(page.url)>{{page.name}}</a>
</li>
</ul>
使用Javascript@H_301_2@
angular.module('link',[])
function myController($scope,$location){
$scope.links = [
{ url: "one",name: "One"},{ url: "two",name: "Two"},{ url: "",name: "Three"}
];
$scope.isActive = function (viewLocation) {
var pattern = '/' + viewLocation,re = new RegExp(pattern);
return re.test($location.path());
};
$scope.menu = function (location) {
$location.path('/' + location.location);
};
}