AngularJS ng-class directive with Example

The AngularJS ng-class directive wont to apply dynamically CSS categories on the premise of true and false worth. means that we will apply one or over one categories for true worth of expression and apply another categories for the false worth of the expression. Let’s perceive with Associate in Nursing example of the ng-class :

AngularJS ng-class Directive And AngularJS Classes Definition and Usage

The ng-class directive dynamically binds one or additional CSS categories to associate HTML component.

The value of the ng-class directive may be a string, an object, or associate array.

If it’s a string, it ought to contain one or additional, space-separated category names.

As associate object, it ought to contain key-value pairs, wherever the secret is the category name of the category you wish to feature, and also the worth may be a mathematician worth. the category can solely be else if the worth is ready to true.

As associate array, it may be a mixture of each. every array component may be either a string, or associate object, represented as on top of.

Ng-Class-With-True-False Example

The ng-class directive can apply the category ‘text-success’ or ‘text-danger’ supported actuality or false worth of the checked variable.

If the checkbox is checked then the worth of checked variable is true and ‘text-success’ category can apply to the element’s content and if false then ‘text-danger’ category can apply to the content.

If we want to apply classes only for true value of the expression then we can use ng-class directive like this

Ng-Class-With-Only-True Example

Now if value of checked variable is true then ‘text-success’ class will apply otherwise no class applied to this element.

AngularJS ng-class-even Example

The ng-class-even directive is strictly same because the ng-class directive except that ng-class-even directive work with the ng-repeat directive and use the impact of even rows. means that on the row 2d,4th,6th… and so on , the category applied that is assigned to the current directive.

AngularJS ng-class-odd Example
The ng-class-odd directive is strictly same because the ng-class directive except that ng-class-odd directive work with the ng-repeat directive and use the impact of wierd rows.Let’s perceive with associate degree example of the ng-class-even and ng-class-odd directives. means that on the row 1st, 3rd, 5th… and so on , the category applied that is assigned to the current directive.

AngularJS Ng-Class-Even-Odd Example

In the on top of example we tend to use ng-class-even and ng-class-odd directives within the scope of ng-repeat directive as a result of we will use these directives solely within the scope of ng-repeat directive. The even rows can show in inexperienced text color and also the odd rows within the red text color. ‘text-success’ and ‘text-danger’ each ar the bootstrap categories.

You also like Angularjs Moment Picker AND Angularjs Ng-Bind with Example