How can I add a class on click with AngularJS and Angular Bootstrap/UI?

Question

I'm fighting against my own grain on this, trying to learn.

I have a Bootstrap menu... Here's part of it:

<div id="language_menu" class="dropdown" on-toggle="toggled(open)">
    <a class="dropdown-toggle" ng-model="clicked"> <span class="flag-xs flag-us"></span> <span class="small va-m">US</span> <i class="fa fa-angle-down"></i> </a>
    <ul class="dropdown-menu">
        <li><a href="javascript:void(0);"><span class="flag-xs flag-in"></span> Hindu</a></li>
        <li><a href="javascript:void(0);"><span class="flag-xs flag-tr"></span> Turkish</a></li>
        <li><a href="javascript:void(0);"><span class="flag-xs flag-es"></span> Spanish</a></li>
    </ul>
</div>

Here's the part of my controller in question:

$scope.toggled = function(open) {
    if (open) {
        $('#language_menu').find('.dropdown-menu').addClass('animated-shortest animated flipInX');
    } else {
        $('#language_menu').find('.dropdown-menu').removeClass('animated-shortest animated flipInX');
    }
};

I'm confused as to the best method for this. ngClick vs dealing with it on the controller in the toggled function? You can see what I'm trying to achieve just by the jQuery. I know this is wrong, or maybe I'm skipping the angular way of handling it...

Please excuse me as I'm entirely new to Angular.

---- Update ----

Would it be considered improper to handle it this way?

<div id="language_menu" class="dropdown" on-toggle="toggled(open)" >
    <a class="dropdown-toggle" href="#"> <span class="flag-xs flag-us"></span> <span class="small va-m">US</span> <i class="fa fa-angle-down"></i> </a>
    <ul class="dropdown-menu {{theClass}}">
        <li><a href="javascript:void(0);"><span class="flag-xs flag-in"></span> Hindu</a></li>
        <li><a href="javascript:void(0);"><span class="flag-xs flag-tr"></span> Turkish</a></li>
        <li><a href="javascript:void(0);"><span class="flag-xs flag-es"></span> Spanish</a></li>
    </ul>
</div>

$scope.toggled = function(open) {
    if (open) {
        $scope.theClass = 'animated-shortest animated flipInX';
    } else {
        $scope.theClass = '';
    }
};

Angular has a very neat directive called ngClass

Goodzilla
– Goodzilla

2014-09-15 19:04:40 +00:00
Commented Sep 15, 2014 at 19:04 — Goodzilla
– Goodzilla, Commented Sep 15, 2014 at 19:04

Idkt · Accepted Answer · 2014-09-15 19:34:50Z

1

ngClass will help. Here's a working example: http://jsfiddle.net/tgg4eq4j/

Some code: HTML:

<div ng-app="TestApp" ng-controller="TestCtrl">
    <button ng-click="toggle()">Toggle</button>
    <span ng-class="getClass()">I'm toggled</span>
</div>

And the JS:

var app = angular.module("TestApp", []);

app.controller("TestCtrl", ["$scope", function ($scope) {
    var flag = true;
    $scope.getClass = function () {
        return flag ? "whitesmoke": "white";
    }

    $scope.toggle = function () {
        flag = !flag;
    };

    $scope.class = "whitesmoke";
}]);

answered Sep 15, 2014 at 19:34

Idkt

3,0034 gold badges29 silver badges48 bronze badges

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

2 Comments

user1447679 Over a year ago

This does work, thank you. As the click in my case is handled by the toggle, can you look at my edits and tell me if I handled this in the wrong way? Just a bit confused...

Idkt Over a year ago

Yes, that is slightly non standard. Two things you should keep in mind: you don't need the toggle function to expect a parameter, that can be maintained in the scope like I did with the flag. You can then negate flag on every toggle() call. Seocondly, the class and the ngClass attributes can be used together. So instead of doing <div class="someclass {{someClassFromScope}}"> you're much better off doing <div class="someclass" ng-class=" {{someClassFromScope}}">. Remember that when you load the page, {{someClassFromScope}} is just text, which might be a bit weird in some situations.

Sinan Mujan · Accepted Answer · 2014-09-15 19:16:00Z

1

Use ngClass:

<div id="language_menu" ng-class="{'animated-shortest animated flipInX': open}" on-toggle="toggled(open)">

</div>

answered Sep 15, 2014 at 19:16

Sinan Mujan

537 bronze badges

1 Comment

user1447679 Over a year ago

For some reason which is probably obvious to everyone else, the ng-class doesn't evaluate on page load. It looks like like I typed it in the code. Please see my updated question as I attempted another method and just curious if this is bad practice or OK? Also, what could I be doing wrong that's preventing the example you showed me to evaluate? Thank you!

Collectives™ on Stack Overflow

How can I add a class on click with AngularJS and Angular Bootstrap/UI?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related