不透明背景颜色样式的div容器的

我有一个修复colorstring如“＃FF0000”我设置此修复程序字符串像这样（AngularJS）：不透明背景颜色样式的div容器的

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

现在我将不透明度设置为只background-color。其实我不知道如何做到这一点没有拆分chatMessageOfUser.color - 字符串？

来源

2016-06-28 quma

您可以创建一个将颜色值转换为'rgba（r，g，b，a）'的过滤器' – Aides

请参阅['ng-style']的示例（https://docs.angularjs.org/api/ ng/directive/ngStyle） –

“chatMessageOfUser.color”的输入格式是什么？ – Aides

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>

参考210

来源

2016-06-28 06:14:24

伟大的工作，这完全好！ – Fiido93

快乐编码@ Fiido93 –

如果我正确理解你的问题，你将需要拆分你的输入。但是，您可以在过滤器中执行此操作。

下面是一些粗糙的例子（注意，这不是生产做好准备，因为你仍然需要输入验证，...）：

.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 + ')'; 
    } 
});

这段代码的用法是

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

请参阅this fiddle以查看它的实际使用情况。

来源

2016-06-28 07:05:05 Aides

不透明背景颜色样式的div容器的

回答

相关问题