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

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>