Q:
How to add a new class to a div which is already styled with classes?
I have a div which looks like:
I want to add a new class to this
which is the product-tile. What should I do?
I am attaching the image of how I want the div to be styled.
A:
This can be done using ng-class directive.
For example:
This code will add the class red when $scope.red is set to true and the class blue when $scope.blue is set to true. So you should set the boolean value for class in your controller.
For more information about ng-class, check out here
A:
Try to add another class name.
and in css, you can control it using myClass class.
A:
To specify an element to add multiple classes you need to use the classList API, the API of which is very similar to jQuery.
For example:
with CSS:
.divClass {
color: blue;
}
See the demo below, note how the content in the box is blue:
angular.module('App', [])
.controller('Ctrl', function() {
});
.product-tile {
width: 250px;
height: 200px;
background-color: red;
margin: 10px;
}
.divClass {
color: blue;
}
Here's the plunker to see it in action:
https://plnkr.co/edit/uRK2DbrWI8tPwS3fJ8A9?p=preview
Please check angularjs documentation about it:
https://docs.angularjs.org/api/ng/directive/ngClass
https://docs.angularjs.org/api/ng/type/ngClass
