CODEWITHSUNDEEP
cssangularjs
quma
quma

Reputation: 5743

Opacity of div container with background-color style

I have a fix colorstring like "#ff0000" and I set this fix string like this (with AngularJS):

<div style="background-color: {{chatMessageOfUser.color}};">...

Now I will set an opacity only to the background-color. Actually I dont know how to do this without splitting the chatMessageOfUser.color- string?

Upvotes: 0

Views: 3100

Answers (2)

Aides
Aides

Reputation: 3673

If I understood your question correctly you will need to split your input. You can do this in a filter however.

Here is some rough example (note that this is not production ready since you still need input validation, ...):

.filter('color', function()
{
    return function(colorString, opacity)
  {
    opacity = opacity || 1;

    colorString = colorString.replace('#', '');

    var splitColor = colorString.match(/.{1,2}/g);

    splitColor = splitColor.map(function(hex) { return parseInt(hex, 16); });

    return 'rgba(' + splitColor[0] + ', ' + splitColor[1] + ', ' + splitColor[2] + ', ' + opacity + ')';
  }
});

The usage of this snippet would be

<div class="colorField" style="background-color: {{colorInput | color:colorAlpha}}">

See this fiddle to see it in action.

Upvotes: 1

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

HTML

ng-class="{'opacityclass': chatMessageOfUser.color == '#ff0000'}"

CSS

.opacityclass
{
opacity :0.5
}

HTML

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.opacityclass
{
opacity :0.5
}
</style>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">Welcome</h1>
<h1 ng-class="{'opacityclass': chatMessageOfUser.color == '#ff0000'}">Welcome</h1>
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td ng-class="{'opacityclass': x.color == '#ff0000'}">{{ x.Country }}</td>
  </tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {  

$scope.names = [
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany" , "color":"#00000"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"fdgdgdg" ,"color":"#066000"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"yuiyui" ,"color":"#ff0000"}
]
$scope.chatMessageOfUser ={
  "color" : "#ff0000",
}
});
</script>

</body>
</html>

reference https://plnkr.co/edit/v6hbk1uMzS5p8bxcDLFT?p=preview

Upvotes: 1

Related Questions