CODEWITHSUNDEEP
javascriptangularjs
logic ltd
logic ltd

Reputation: 65

How to add and remove classes according to angular path?

I have this directive with 4 buttons where I want to add and remove classes when I am on one of the pages.

For example when I am on "exterior" that button to be removed and when I am on "interior" to remove only the interior button.

Shall I add something in "exterior controller"?

<section>
    <nav>
        <ul class="nav footer-tabs">
            <li class="exterior col-sm-4"><a href="#/exterior"><img src="img/colour-options.png"></a></li>
            <li class="interior col-sm-4"><a href="#/interior"><img src="img/Interior-360.png"></a></li>
            <li class="gallery col-sm-4"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li>
            <li class="discover col-sm-4"><a href="#"><img src="img/UP-Discover.png"></a></li>
        </ul>
    </nav>
</section>

Upvotes: 1

Views: 100

Answers (3)

user3281440
user3281440

Reputation: 243

There are different approaches, but try this 

<li ng-class="{interior: currentpage == 'interior'}">

where currentpage is a current $scope variable, it means interior class will be added when currentpage is equal to interior.

Upvotes: 0

Ali Arshad
Ali Arshad

Reputation: 436

You need to make a variable and use ng-class

e.g. $scope.page is your variable assign is value depending on page

if(currentpage==exterior)$scope.page=1
if(currentpage==interior)$scope.page=2
if(currentpage==gallery)$scope.page=3
if(currentpage==discover)$scope.page=4

Then use the directive like this:

    <section>
    <nav >
    <ul class="nav footer-tabs">
        <li class="exterior col-sm-4" ng-class="{'disable':page==1}"><a href="#/exterior"><img src="img/colour-options.png"></a></li>
        <li class="interior col-sm-4" ng-class="{'disable':page==2}"><a href="#/interior"><img src="img/Interior-360.png"></a></li>
        <li class="gallery col-sm-4" ng-class="{'disable':page==3}"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li>
        <li class="discover col-sm-4" ng-class="{'disable':page==4}"><a href="#"><img src="img/UP-Discover.png"></a></li>
    </ul>
    </nav>
</section>

and if you want to hide buttons there is a better way, use ng-hide instead of ng-class, e.g:

<section>
    <nav >
    <ul class="nav footer-tabs">
        <li class="exterior col-sm-4" ng-hide="page==1"><a href="#/exterior"><img src="img/colour-options.png"></a></li>
        <li class="interior col-sm-4" ng-hide="page==2"><a href="#/interior"><img src="img/Interior-360.png"></a></li>
        <li class="gallery col-sm-4" ng-hide="page==3"><a href="#/gallery"><img src="img/View-Gallery.png"></a></li>
        <li class="discover col-sm-4" ng-hide="page==4"><a href="#"><img src="img/UP-Discover.png"></a></li>
    </ul>
    </nav>
</section>

Upvotes: 1

Maen
Maen

Reputation: 10698

Considering a menuItem directive on each li of your menu :

//Don't forget the $location dependency, to retrieve the current path
pf_app.directive('menuItem', ["$location", function ($location) {
    return{
        restrict: 'A',
        link : function (scope, element, attr) {
            //Watch location change event
            scope.$on('$locationChangeSuccess', function(){
                //Get the current path
                var path = $location.path(),
                //Get the child link of the current element
                    href = element.children("a").attr("href").slice(1);
                //If the paths matches
                if (href == path)
                    //Add the class
                    element.addClass("active");
                else
                    //Remove it
                    element.removeClass("active");
            });

        }
    }
}]);

Upvotes: 1

Related Questions