We can add, remove or check classes through our angular code:
The following is the syntax for adding a class and the corresponding CSS related to that class:
HTML:
<div ng-app="addRemove" ng-controller="myCtrl">
<div id="myDiv" ng-class="staticClass">Adding and Removing class from the element.</div>
<button type="button" ng-click="addClass();">Add Class</button>
<button type="button" ng-click="removeClass();">Remove Class</button>
<button type="button" ng-click="checkClass();">Check Class</button>
</div>
Style:
.red {
color:red;
}
Script:
var app = angular.module("addRemove",[]);
app.controller ("myCtrl", function($scope) {
$scope.staticClass = [];
$scope.addClass = function() {
$scope.staticClass.push('red');
}
$scope.removeClass = function() {
$scope.staticClass.pop('red');
}
$scope.checkClass = function() {
if($scope.staticClass.indexOf('red') == -1) {
alert('Doesn't have class red');
} else {
alert('Has class red');
}
}
});
Hope this will help you to resolve your issue.
0 Comment(s)