Conditionally apply a class with AngularJS

Using AngularJs we can apply a class condionally on any element by using ng-class.

According to AngularJS docs on ng-class

The ng-class allows you to dynamically set a css class name on html element by data-binding an expression that represents all classes to be added.

ng-class supports an expression that must evaluate to either

1. a string of space-delimited class names, or
2. an array of class names, or
3. a map/object of class names to boolean values.

Example:

Consider you have a div element as shown below

<div class="example">
    //inner elements
</div>

Now if you want to add class named "selected" to the above div conditionally. You can add the class using below code

<div class="example" ng-class="{'selected':isActive}">
    //inner elements
</div>

The class named "selected" gets applied to the above div only if "isActive" property is true.

The result will be like below

<div class="example selected" ng-class="{'selected':isActive}">
    // inner elements
</div>

You can even directly add a property(of model) as a class. see code below

<div ng-class="model.color">
    //inner elements
</div>

if model.color is "red" class named "red" is gets applied to the div.

The result will be like below

<div class="red" ng-class="model.color">
    //inner elements
</div>

Note: 

The directive won't add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then the new classes are added.

In this way you can apply a class conditionally using AngularJS

For more posts on AngularJS please visit : AngularJS

Read more...

Dynamically apply a class using AngularJS

Angular provides ng-class directive for adding/removing css styles dynamiucally.

According to angular docs: The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

ng-class accepts an "expression" that must evaluate to one of the following:

1.a string of space-delimited class names
2.an array of class names
3.a map/object of class names to boolean values

Lets say you are showing a list of items using ng-repeat and each item has a corresponding checkbox. Now when a checkbox is checked then you want to apply some styles to that respective item (like changing the color etc). This can de done using ng-class. Look at the below code to see how it works.

Example:

html code:

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items" ng-class="{'selected-item': item.checked}">
        <input type="checkbox" ng-model="item.checked">
        {{item.name}}, {{item.title}}
    </div>
</div>

javascript:

var myApp = angular.module('myApp', []);
 
function MyCtrl($scope) {
    $scope.items = [
        {
            name: 'Misko',
            title: 'Angular creator'
        },
        {
            name: 'Igor',
            title: 'Meetup master'
        },
        {
            name: 'Vojta',
            title: 'All-around superhero'
        }
 
    ];
}

css:

.selected-item {
    color: green;
}

When you click on a checkbox, the class "selected-item" gets added to the particular item and the color will be changed to green as mentioned in css.

For live example look at this fiddler: http://jsfiddle.net/codingsolver/dxBdR/

Note: If a class was already applied then the directive will not add duplicate class. When expression changes , newly added classes will be removed.

This way we can add css classes dynamically using AngularJS.

For more posts on AngularJS visit: AngularJS

Read more...