Question

我正在使用Angular 1建立一个网站，并且我正在努力做正确的事情＆＃34; Angular方式，不使用jQuery来填充功能。现在，我正在尝试构建一个根据视图显示不同的标题/导航栏。我的标题模板如下所示，使用ng-class为不同的导航栏布局应用样式：

<header ng-controller="headerController">
<div class="row topnav-row">
    <div class="navbar" id="nav-main">
        <div class="navbar-inner">
            <a href="home">
                <img class="col-md-4" id="topnav-logo" ng-class="{$scope.where == '/' ? 'logoCenter' : 'logoLeft'}" src="media/kg-icon-placeholder.png" />
            </a>
            <ul class="nav">
                <li class="col-xs-4 col-md-2 topnav"><a href="contact">Contact</a></li>
                <li class="col-xs-4 col-md-2 topnav"><a href="about">About</a></li>
                <li class="col-xs-4 col-md-2 topnav"><a href="portfolio">Portfolio</a></li>
            </ul>
        </div>
    </div>
</div>
<hr class="topnavline">
</header>

我的CSS类看起来像这样：

.logoLeft {
width: 100px;
float: left;
}

.logoCenter {
width: 300px;
}

正如你所看到的，我希望在主页上显示宽度为300px的图像＆＃34; /＆＃34;加载，并使其宽100px，否则向左浮动。我已经和它搏斗了一段时间，并且找不到任何可以正确完成这项工作的书面文件。我做错了什么？

在AngularJS中有条件地更改标题样式

0 个答案: