8 Example(s) of Ng-Class


Description :

In this example we create two drop-down one with background colors and second with text color using bgrArrs and clrArrs arrays of objects like: $scope.bgrArrs = [{ className: "gray" }, { className: "magenta" }, { className: "aqua" }, { className: "burlywood" }]; $scope.clrArrs = [{ className: "text-success" }, { className: "text-danger" }, { className: "text-info" }, { className: "text-warning" }]; and we will apply the selected class to text "Class Applying on me", Here is the code for ng-Class: ng-class="[TxtclassName , BgrclassName]" It will change the color of text based on the value of ng-class directive.


Ng-Class Example - 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .gray {
        background-color: gray;
    }

    .magenta {
        background-color: magenta;
    }

    .aqua {
        background-color: aqua;
    }

    .burlywood {
        background-color: burlywood;
    }
</style>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <div class="container">
            Backgroung-Color<select ng-model="BgrclassName" ng-options="bgrArr.className as bgrArr.className for bgrArr in bgrArrs"></select><br />
            Text-Color<select ng-model="TxtclassName" ng-options="clrArr.className as clrArr.className for clrArr in clrArrs"></select>
            <h2 ng-class="[TxtclassName , BgrclassName]">Class Applying on me.</h2>
        </div>
    </div>
<script>
    var app = angular.module("switchExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.bgrArrs = [{ className: "gray" }, { className: "magenta" }, { className: "aqua" }, { className: "burlywood" }];
        $scope.clrArrs = [{ className: "text-success" }, { className: "text-danger" }, { className: "text-info" }, { className: "text-warning" }];
    }]);
</script>
</body>
</html>

Output

Description :

Lets try with new example where we are changing the classes based on checkbox selection and hasError class will apply on First Name textbox if hasError variable is set to true with ng-model directive.hasSuccess class will apply on Last Name textbox if hasSuccess variable evaluates true. This is how we add ng-class to first name: ng-class="{true:'hasError',false:'hasSuccess'}[hasError]"


Ng-Class Example - 2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
    .hasError {
        border-color: red;
    }
      .hasSuccess {
        border-color: green;
    }
</style>
</head>
<body ng-app>
    <div>
        <div class="container">
            <div class="well col-md-3">
                Has Error <input type="checkbox" ng-model="hasError" /><br />
               
                <br />
                First Name<input type="text" class="form-control" ng-class="{true:'hasError',false:'hasSuccess'}[hasError]" />
                Last Name<input type="text" class="form-control" ng-class="{true:'hasError',false:'hasSuccess'}[hasError]" />
            </div>
        </div>
    </div>
</body>
</html>

Output

Description :

Size and color of text will change if we click on Set button because true value of setClass is assign to ng-class directive and text set to original size and color if we click on Reset button because false value of setClass variable assign to ng-class directive.


Ng-Class Example - 3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .setClass {
        transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
        color: red;
        font-size: 3em;
    }
</style>
</head>
<body ng-app>
    <div>
        <div class="container">
            <div class="well col-md-3">
                <input type="button" ng-click="setClass=true" value="Set" />
                <input type="button" ng-click="setClass=false" value="Reset" />
                <br />
                <h1 ng-class="{true:'setClass'}[setClass]">Sample Text</h1>
            </div>
        </div>
    </div>
</body>
</html>

Output

Description :

Using ng-repeat we dispaly elements of array of object.$odd is true at odd position then odd class is apply to odd elements and even class will apply to other elements.


Ng-Class Example - 4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .odd {
        color: red;
    }
    .even {
        color: green;
    }
</style>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <table>
                <thead>
                    <tr ng-repeat="Arr in Arrs">
                        <th ng-class="{true:'odd',false:'even'}[$odd]">
                            {{Arr.name}}
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script>
    var app = angular.module("switchExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.Arrs = [{ name: "Angular" }, { name: "Jquery" }, { name: "JavaScript" }, { name: "Bootstrap" }]
    }]);
</script>
</body>
</html>

Output

Description :

We display elements using ng-repeat directive.The elements whose index not equals to 0,the index class will implemented on that elements.


Ng-Class Example - 5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .index {
        color: red;
    }
</style>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <table>
                <thead>
                    <tr ng-repeat="Arr in Arrs">
                        <th ng-class="{true:'index',false:''}[$index!=0]">
                            {{Arr.name}}
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script>
    var app = angular.module("switchExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.Arrs = [{ name: "Angular" }, { name: "Jquery" }, { name: "JavaScript" }, { name: "Bootstrap" }]
    }]);
</script>
</body>
</html>

Output

Description :

In this index class will apply to those element where index value is equal to row value.When we click on the any element it calls the selectedRow() function in which index value is assign to row variable.


Ng-Class Example - 6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .index {
        color: white;
        background-color: gray;
    }
</style>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <table>
                <thead>
                    <tr>Click on course to apply class.</tr>
                    <tr ng-repeat="Arr in Arrs">
                        <th ng-class="{index:$index==row}" ng-click="selectedRow($index)">
                            {{Arr.name}}
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script>
    var app = angular.module("switchExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.Arrs = [{ name: "Angular" }, { name: "Jquery" }, { name: "JavaScript" }, { name: "Bootstrap" }];
        $scope.selectedRow = function (index) {
            $scope.row = index;
        };
    }]);
</script>
</body>
</html>

Output

Description :

If we click on first button show-me class will apply on that div element because startAni1 value is true and if we click on second button move-me class will apply on that div element because startAni2 value is true.


Ng-Class Example - 7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .box-base {
        opacity: 0;
        padding: 10px;
        margin: 10px;
        color: white;
        background: green;
    }

        .box-base.box1 {
            -webkit-transition: opacity linear 0.5s;
            transition: opacity linear 0.5s;
        }

        .box-base.box2 {
            -webkit-transition: all ease 0.10s;
            transition: all ease 0.6s;
            position: absolute;
            top: 200px;
            left: 100px;
            opacity: 1;
        }

    .show-me {
        opacity: 1;
    }

    .box-base.box2.move-me {
        top: 50px;
        left: 400px;
        opacity: 1;
        background-color: pink;
    }
</style>
</head>
<body ng-app>
    <div>
        <div class="container" ng-init="startAni1 = false; startAni2 = false;">
            <input type="button" value="Animation 1" ng-click="startAni1 =!startAni1" />
            <input type="button" value="Animation 2" ng-click="startAni2=!startAni2" />
            <div class="box-base box1" ng-class="{true:'show-me',false: ''}[startAni1]">Box1: Hello learnIt transitions!</div>
            <div class="box-base box2" ng-class="{true:'move-me',false: ''}[startAni2]">Box2: Hello learnIt transitions!</div>
        </div>
    </div>
</body>
</html>

Output

Description :

On button click we can show or hide the text and "Change Color" button on the basis of startAni1 and startAni2 value.On change color button click startAni2 evaluates true then red class will apply to the text.


Ng-Class Example - 8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .red {
        color: red;
    }

    .green {
        color: green;
    }
</style>
</head>
<body ng-app>
    <div>
        <div class="container" ng-init="startAni1 = false,startAni2 = false">
            <input type="button" value="Toggle Me" ng-click="startAni1 =!startAni1" />
            <div ng-show="startAni1">
                <p ng-class="{true:'red',false:'green'}[startAni2]">Hi I'm visible</p> <input type="button" value="Change Color" ng-click="startAni2=!startAni2" />
            </div>
        </div>
    </div>
</body>
</html>

Output