Question

我有以下HTML文件：

<header ng-include="'app/partials/includes/header.html'"></header>

<div class="container" ng-controller="LoginCtrl">

</div>

以上是登录页面，下面是登记册：

<header ng-include="'app/partials/includes/header.html'"></header>

<div class="container" ng-controller="RegisterCtrl">

</div>

这是标题：

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Curve</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#/register">Sign Up</a></li>
                <li><a href="#/login">Sign In</a></li>
            </ul>
        </div>
    </div>
</div>

如何将.active类应用于依赖于路径的列表元素？

如果路由是/ register，我希望应用活动类，并且登录相同。

如何在Angular中完成？

Answer 1

对任何元素使用ng-class以有条件地应用于元素。使用对象表示法，键是类名，当计算结果为true时，该值是表达式，该类被添加到该元素的类属性中。

<div class="header" ng-controller="HeaderController">
  <div ng-class="{ active: registrationOrLogin }">

</div>

在控制器中：

app.controller("HeaderController", [ "$scope", "$location", function($scope, $location) {
    $scope.registrationOrLogin = $location.hash() == "/login" || $location.hash() == "/registration";
} ] );

基于路由的角度切换CSS类？

1 个答案: