CODEWITHSUNDEEP
angularjstwitter-bootstrap
user1447679
user1447679

Reputation: 3240

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

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 = '';
    }
};

Upvotes: 0

Views: 379

Answers (2)

Idkt
Idkt

Reputation: 2996

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";
}]);

Upvotes: 1

Sinan Mujan
Sinan Mujan

Reputation: 53

Use ngClass:

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

</div>

Upvotes: 1

Related Questions