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.
<!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>
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]"
<!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>
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.
<!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>
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.
<!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>
Description :
We display elements using ng-repeat directive.The elements whose index not equals to 0,the index class will implemented on that elements.
<!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>
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.
<!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>
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.
<!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>
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.
<!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>