I want to add/remove CSS classes just like jQuery's $('#element').addClass('new_class')
and removeClass()
. Does AngularJS offer a native solution that doesn't require jQuery or jQLite? Our main developer says he's going to remove jQuery for performance reasons, so I need a native solution.
I believe the example below uses jQLite, which would also be removed.
angular.element('#element').addClass("new_class");
Is there a truly native option?
P.S. I've used ngClass, and that doesn't seem to suit my need, since I need to control it from the Controller. I'm basically utilizing the Animate.css library for animations, thus on certain events I need to add/remove CSS classes to trigger the animation. I don't think I can achieve this with ngClass.
You just need to bind a variable into the directive "ng-class" and change it from the controller. Here is an example of how to do this:
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.class = "red";
$scope.changeClass = function(){
if ($scope.class === "red")
$scope.class = "blue";
else
$scope.class = "red";
};
});
.red{
color:red;
}
.blue{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>
</body>