Question

我有像＃ff0000这样的修复色弦，我设置了这样的修复字符串（使用AngularJS）：

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

现在我将仅为background-color设置不透明度。实际上我不知道怎么做而不分割chatMessageOfUser.color - 字符串？

Answer 1

<强> 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>

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

Answer 2

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

这是一些粗略的例子（请注意，由于您仍需要输入验证，因此这不是生产准备，...）：

.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以了解相关信息。

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

2 个答案: