Angularjs Toggle Class Using Ng-Class

AngularJS toggle class using ng-class

How to use conditional in ng-class:

Solution 1:

<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>

Solution 2:

<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>

Solution 3 (angular v.1.1.4+ introduced support for ternary operator):

<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>

Plunker

AngularJs toggle ng-class ng-click

The correct approach would be using ng-class based on a toggle variable, consider:

CSS:

.red {
    color: red;
}

JS:

$scope.toggle = false;

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

ng-class works by assigning the referenced class (in the above, "red") based on if the variable ("toggle") is true or false.

AngularJS toggle class using ng-class for multiple elements

Create for each of your nodes some field like 'isExpanded' and on ng-click on this element toggle value of this field for current node. So it would be something like this:

controller:

// In init function
initDirs($scope.data.dirs)
....
function initDirs (dirs) {
    angular.forEach(dirs, function(dir) {
        dir.isExpanded = false;
        if (dir.children.length) {
            initDirs(dir.children)
        }
    })
};

template:

<li ng-repeat="item in data.dirs" metis="">
    <a ng-click="item.isExpanded= !item.isExpanded" href="#">
        <i ng-class="item.isExpanded ? 'fa fa-folder-open-o' : 'fa fa-folder-o'"></i>
        <span>{{ item.name }} </span>
    </a>
    <ul ng-show="item.isExpanded">
        <!-- Child nodes here -->
    </ul
</li>

Keep in mind that if you don't know something about folder tree characteristics like deep and etc., you should to create 2 directives: [tree] (for all tree) and [tree-node] for each of node. With this directives you will have ability to create trees of any structure

using ng-class to toggle class

can you try like this , make use of ternary operator

ng-class="isApplication ? 'col-md-6' : 'col-md-3'">

how to toggle ng-class when directive ng-repeat item is clicked

See forked plnkr

In a nutshell, you're are using ng-repeat for the directive user-group-item. For each repeated user-group-item (2 in this case), the directive will make its own scope and controller method initialization. So you can not use $scope.selected inside the directive to store what is selected, because each user-group-item will have its own selected variable in its $scope

You need to store that selected state outside the directive, ie in the main controller. I created a function setSelected in the main controller and passed it as a method reference using & in the directive. Inside the $scope.isClicked method, you need to refer to the parent scope to get the function setSelected

Toggle class with ng-click on several elements

I made simple directive for testing:

module.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

so you can make any element toggle class you need

<button id="btn" toggle-class="active">Change Class</button>
<div toggle-class="whatever"></div>

ng-click and ng-class to toggle classes

Try adding an ng-init to a container div:

<div ng-init="open=false">
    <nav class="slide-menu" ng-class="{'open': open}">
    <button class="slide-btn" ng-click="open=!open"></button>
</div>

Or add $scope.open = false; in your scope.

What happens in your above code is that each one of the two elements has it own scope, which contains a open property, so you can wrap them in another element (that has it's own scope) and place the open property there. so in the inner scopes of the nav and the button when it tries to look for a property called open it looks in it's own scope and don't find it, so it looks in it's parent scope (the wrapping div) and find it there.

You can understand more about angular scope inheritance from here:
https://github.com/angular/angular.js/wiki/Understanding-Scopes

-- Also, you don't need the '': !open part.

Angular ngClass and click event for toggling class

This should work for you.

In .html:

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
    Some content
</div>

In .ts:

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}

AngularJS -- Toggle class for only one element (ng-class and ng-click)

The difficulty is that in your case all list elements share the same scope, so when you set isActive there is no way to distinguish which one is actually should be active.

The simple solution to me is to isolate scope for every item. Maybe this is not nicest solution, but pretty simple with the help of very tiny directive:

    <ul>
        <li ng-repeat="item in listItems">
            <a isolate ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">L</a>
            <a isolate ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">R</a>
            <a isolate ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">J</a>
        </li>
    </ul>

Where isolate directive is defined as:

app.directive('isolate', function() {
    return {scope: true};
});