CODEWITHSUNDEEP
angularjs
user7397787
user7397787

Reputation: 1470

Toggle active class-angular js

I have 2 links EN and FR(english and french languages)

<label  class = "lang" id="en"><a href=""  ng-click="c.changedLang('en');" ng-class=" eng ? active:'' ">EN </a>
                </label>
                <label>||
                </label>
                <label  class = "lang" id="fq"><a href=""  ng-click="c.changedLang('fq');" ng-class=" fren ? active:'' ">FR</a>
                </label>

When an EN link clicked active class should be added to english language, when FR link clicked active class should be added to french language.

On page load active class added to english language.I am doing it based on location.hash.

client script

if(location.hash=='#en'){
                $scope.eng=true;
             $scope.fren=false;
            }
            else{
                $scope.fren=true;
                $scope.eng=false;
            }

CSS

.active{
color:#fff;
}

Is anything wrong in my code? active classes are not getting added properly.

Upvotes: 1

Views: 186

Answers (2)

james00794
james00794

Reputation: 1147

You have your ng-class statements slightly wrong. ng-class expects an array or object as it's input. Change them to the following so that they get the expected input:

ng-class="{'active': eng}"

and

ng-class="{'active': fren}"

Here is a simple plunker to get you started: http://plnkr.co/edit/6l9C0lQISlTVxcIpumQI

Upvotes: 2

nad
nad

Reputation: 1100

You can achieve this by updating the code like so:

HTML

<label class="lang" id="en">
    <a href="" ng-click="locale = 'en'" ng-class="{'active': locale == 'en'}">EN </a>
</label>
<label class="lang" id="fq">
    <a href="" ng-click="locale = 'fr'" ng-class="{'active': locale == 'fr'}">FR</a>
</label>

To set a default locale you can set the value of $scope.locale to either 'en' or 'fr'

Upvotes: 1

Related Questions