Angular - How to add HTML element and change class if user click on ELEMENT

Question

I was thinking how to change class and add HTML if user pick language (see code below)

<li>
 <a ng-click="changeLanguage('en')">English</a>
</li>

to something like this:

<li>
 <a ng-click="changeLanguage('en')" class="active">English
  <span class="icon icon-tick"></span>
 </a>
</li>

My first idea was something like to add something like $scope.active and then use ng-class

ng-class="{'active': active, '': !active}"

But this not work with that HTML below and I'm also not sure if it work correctly with my class.

Can someone advise me how to do things like this in Angular? Thanks

EDIT: I wasn't specific enaugh, i have more languages in option so HTML looks like:

              <ul class="reset">
                    <li>
                        <a ng-click="changeLanguage('en')">English</a>
                    </li>
                    <li>
                        <a ng-click="changeLanguage('cs')" class="active">
                            Česky
                            <span class="icon icon-tick"></span>
                        </a>
                    </li>
                </ul>

Where "CS" is how it should always look like when some language is active and EN is how it should looks like when that language is not active

Richard Dalton · Accepted Answer · 2016-01-05 16:50:34Z

1

What you need to do is store the currently active selection then change your html angular code to check against that like so:

var app = angular.module("myApp", []);
app.controller("test", function($scope) {
  $scope.currentActive = "en";
  $scope.active = function(lang) {
    return lang == $scope.currentActive;
  }
  $scope.changeLanguage = function(lang) {
    $scope.currentActive = lang;
  }
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="test">
  <li>
    <a ng-click="changeLanguage('en')" ng-class="{ 'active': active('en') }">English
    <span ng-show="active('en')" class="icon icon-tick">Tick</span>
   </a>
  </li>
  <li>
    <a ng-click="changeLanguage('cs')" ng-class="{ 'active': active('cs') }">
      Česky
      <span ng-show="active('cs')" class="icon icon-tick">Tick</span>
    </a>
  </li>
</div>

answered Jan 5, 2016 at 16:50

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andurit Over a year ago

Just awesome code, thumb up and big thanks to you @Richard Dalton

Swapnil Sharma · Accepted Answer · 2016-01-05 16:30:25Z

0

You can use jQuery to do that.

$("a").click(function(){
    $(this).attr("class","active");
});

answered Jan 5, 2016 at 16:30

Swapnil Sharma

91 silver badge7 bronze badges

1 Comment

Andurit Over a year ago

Hey @Swapnil Shama thank you for your answer. UnfortunatelyI need to do this in angular :)

Coder002 · Accepted Answer · 2016-01-05 16:55:33Z

0

Try this:

<li>
<a ng-click="changeLanguage('en')" ng-class="isActive">English
<span class="icon icon-tick" ></span>
</a>
</li>

And in your function $scope.changeLanguage, add this:

$scope.isActive = 'active';

Edits: Use:

<li>
 <a ng-click="changeLanguage('en')" ng-class="{'active': currentLang =='en'}">English
  <ng-show="currentLang == 'en'" span class="icon icon-tick" ></span>
 </a>
</li><li>
 <a ng-click="changeLanguage('cs')" ng-class="{'active': currentLang =='cs'}">English
  <ng-show="currentLang == 'cs'" span class="icon icon-tick" ></span>
 </a>
</li>

And in your function $scope.changeLanguage, add this:

$scope.currentLang = your_function_param;

edited Jan 5, 2016 at 16:55

answered Jan 5, 2016 at 16:36

Coder002

2752 silver badges14 bronze badges

1 Comment

Andurit Over a year ago

Hi @Anass, i wasnt specific enaugh so I am really sorry for that. Please check my EDIT

Henry Zou · Accepted Answer · 2016-01-05 18:01:30Z

0

You can also use currentActive === 'cs' directly

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="test">
  <li>
    <a ng-click="changeLanguage('en')" ng-class="{ 'active': currentActive === 'en' }">English
    <span ng-show="active('en')" class="icon icon-tick">Tick</span>
   </a>
  </li>
  <li>
    <a ng-click="changeLanguage('cs')" ng-class="{ 'active': currentActive === 'cs' }">
      Česky
      <span ng-show="currentActive === 'cs'" class="icon icon-tick">Tick</span>
    </a>
  </li>
</div>

answered Jan 5, 2016 at 18:01

Henry Zou

1,9271 gold badge14 silver badges19 bronze badges

Comments

Sunil Sistla · Accepted Answer · 2016-01-05 18:06:00Z

0

Manipulating dom in angular controllers is not recommended. May be u can already have the span with ng-if on it

answered Jan 5, 2016 at 18:06

Sunil Sistla

665 bronze badges

Collectives™ on Stack Overflow

Angular - How to add HTML element and change class if user click on ELEMENT

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related