<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="HomeCtrl">
<div class="jumbotron">
<img src="http://tech-blog.maddyzone.com/wp-content/uploads/2013/10/maddyzone-logo-300x72.png">
<br/>
<h1>Add , Remove and Toggle classes in Angular JS</h1>
<br/>
<hr/>
<label class="alert label-info">Add and remove particular one class</label>
<hr/>
<!-- all magic happen here
here class_status value will come as a boolean if its true then class add otherwise remove -->
<div class="alert" ng-class="{'bg-success':class_status }">{{single_message}}</div>
<a class="btn btn-info" ng-click="addSingleClass()">Add Class</a>
<a class="btn btn-success" ng-click="removeSingleClass()">Remove Class</a>
<a class="btn btn-warning" ng-click="toggleSingleClass()">Toggle Class</a>
<br/>
<br/>
<hr/>
<label class="alert label-info">Add and remove different class</label>
<hr/>
<!-- these is for when we want to apply any number of class
according to the class_name $scope here class_name
value will come in three form blue , red ,green
then class will apply respectively
bg-info,bg-danger,bg-success
-->
<div class="alert" ng-class="{blue:'bg-info', red:'bg-danger',green:'bg-success' }[class_name]">{{multi_message}}</div>
<a class="btn btn-info" ng-click="blueClass()"> Blue Class</a>
<a class="btn btn-danger" ng-click="redClass()">Red Class</a>
<a class="btn btn-success" ng-click="greenClass()">Green Class</a>
<br/>
<br/>
<a href="http://tech-blog.maddyzone.com/javascript/conditionally-apply-classes-in-angularjs" target="_blank">View Post on Maddyzone </a>
</div>
</div>
</body>
</html>
var myApp = angular.module('myApp', []);
// set for Home Controller
myApp.controller('HomeCtrl', function($scope) {
$scope.class_status = 0;
$scope.single_message="see the add remove class effect";
$scope.multi_message="see multi class effect";
$scope.toggleSingleClass = function() {
$scope.class_status = !$scope.class_status;
$scope.single_message ="class is toggle";
};
$scope.removeSingleClass = function() {
$scope.class_status =0;
$scope.single_message ="remove class";
};
$scope.addSingleClass = function() {
$scope.class_status = 1;
$scope.single_message ="add class";
};
$scope.blueClass = function() {
$scope.class_name = "blue";
$scope.multi_message ="Blue Class Added";
};
$scope.redClass = function() {
$scope.class_name ="red";
$scope.multi_message ="Red Class Added";
};
$scope.greenClass = function() {
$scope.class_name = "green";
$scope.multi_message ="Green Class Added";
};
});
/* Styles go here */
Add , Remove and Toggle classes in Angular JS