Question

我有一个div，它有一个ng-style属性，其rgba值使用$ scope变量作为alpha值：

ng-style="{'background-color': 'rgba(255,0,0,{{ alphaValue / 100}})'}"

我有一个输入滑块，用于更改alphaValue的值。我可以使用console.log查看值的更改，并在html中的调试器中更新rgba值。它只是没有在视图中应用。

有什么建议吗？

Answer 1

它看起来就像下面的

ng-style="{'background-color': 'rgba(255,0,0,'+ (alphaValue/ 100) +')'}"

Answer 2

创建一个控制器方法获取样式对象。它的清洁方法。

<强> HTML

ng-style="ctrl.getElementStyle(alphaValue)"

<强> CONTROLLER

 ctrl.getElementStyle = function (alphaValue) {
        var alpha = alphaValue / 100;
        return {'background': 'rgba(255,0,0,' + alpha +')'};
  };

Answer 3

我怀疑你需要使用控制器方法：

$scope.getRGBA = function(alpha){              
   return 'rgba(255,0,0,'+ alpha / 100 + ')';
}

HTML

ng-style="{'background-color':  getRGBA (alphaValue)}"

应确保alpha也未定义，并设置默认值

Rgba值不以ng-style更新

3 个答案: