Wednesday, 21 October 2015

ng-class

What is ng-class: ng-class used to add a class in HTML element on a particular condition .

Description of ng-class: On rendering if a given condition is true then this class will be added on that element where this ng-class directive placed. it is very useful to adding a class .you can add more than on class on different condition too.

Syntax of ng-class:


<div ng-class="{'classname':condition}"></div>

How to Use ng-class/ng-class Example:
<style>
    .mybackgroundcolor {
        background-color: yellow;
    }

</style>
 AngularJs Example 1:
<div>
    Angularjs Example of ng-class
    <br />
    <div ng-init="IsClassApply=true" ng-class="{'mybackgroundcolor':IsClassApply}">
        This is angularjs example of ng-class
    </div>
</div>
  o/p:   Angularjs Example of ng-class
           This is angularjs example of ng-class


 AngularJs Example 2:  

<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-class
            <br />
            <div ng-class="{'mybackgroundcolor':IsClassApply}">
                This is angularjs example of ng-class
            </div>
        </div> 
    </div>
</div>
    <script>
        angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
            $scoep.IsClassApply = true;
        });
    </script>

      o/p: Angularjs Example of ng-class
            This is angularjs example of ng-class

No comments :

Post a comment