Change CSS with AngularJS

I have an element of a web application whose class is connected to a CSS with the following values:

.map-darken img.leaflet-tile {
  -webkit-filter: brightness(0.99) contrast(1) saturate(465%) hue-rotate(343deg);
  filter: brightness(0.99) contrast(1) saturate(465%) hue-rotate(343deg);
}

I need to know how I can change the values of brightness, contrast, saturate and hue-rotate dynamically with AngularJS indicating the values in some text fields like the ones shown in the image: image

Or failing that, knowing how to indicate in the ng-style directive the specific classes you want the style to affect.

1 answer

  • answered 2018-11-08 11:43 Cristiano Soares

    I suggest the following solution:

    <input type="text" ng-model="brightValue" ng-init="brightValue = 0.99">
    <input type="text" ng-model="contrastValue" ng-init="contrastValue = 1">
    <input type="text" ng-model="saturationValue" ng-init="saturationValue = 465">
    <input type="text" ng-model="hueValue" ng-init="hueValue = 343">
    
    <img src="yourphoto.jpg" ng-style="{ 'filter' : 'brightness(' + brightValue + ') contrast(' + contrastValue + ') saturate(' + saturationValue + '%) hue-rotate(' + hueValue + 'deg)' }">