Toggle active class-angular js

Question

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.

Answer 1

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

Answer 2

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'