Change header styles conditionally in AngularJS

Question

I'm building a site using Angular 1, and am trying to do things the "proper" Angular way, without using jQuery to fill in functionality. Right now, I'm trying to build a header/navbar that will display differently depending on the view. My template for the header looks like this, using ng-class to apply styles for the different navbar layouts:

<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>

My CSS classes look like this:

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

.logoCenter {
width: 300px;
}

As you can see, I want to display an image at width: 300px when the homepage "/" is loaded, and make it 100px wide and float left otherwise. I've been wrestling with this for awhile, and can't find anything written that indicates how this should be done properly. What am I doing wrong?

this could be helpful to you http://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class — Geeky, Oct 24 '16 at 18:33

Change header styles conditionally in AngularJS

0 Answers0