javascript - 如何使用 AngularJS 在同一个视图中应用 class="active" 进行过滤

Question

<dl class="sub-nav" text-align="center">
<dt>Filter:</dt>
<dd class="active"><a href="http://localhost:9000/#/">New</a></dd>                                                
<dd><a href="http://localhost:9000/#/ignored">Ignored</a></dd>                                            
<dd><a href="http://localhost:9000/#/alerted">Alerted</a></dd>                                            

这就是我所拥有的，我需要 class="active" 根据 URL 向下移动。问题是一切都使用相同的视图，但不同的控制器。我该怎么做呢？谢谢你的帮助。

Answer 1

在不了解更多关于您的控制器或路由的情况下，您可以这样做的一种方法是在设置时您$routeProvider可以指定额外的路由数据并使用ngClass

.when("/ignored", {
    //stuff
    action : "ignored"
})

并在您的控制器中注入$route

function MyCtrl(//stuff $route){
    $scope.$route = $route;
}

还有你的看法

<dl class="sub-nav" text-align="center">
<dt>Filter:</dt>
<dd ng-class="{'active' : $route.current.action == 'home'}">
    <a href="http://localhost:9000/#/">New</a>
</dd>                                                
<dd ng-class="{'active' : $route.current.action == 'ignored'}">
    <a href="http://localhost:9000/#/ignored">Ignored</a>
</dd>                                        
<dd ng-class="{'active' : $route.current.action == 'alerted'}">
    <a href="http://localhost:9000/#/alerted">Alerted</a>
</dd>