javascript - Rgba 值未以 ng 样式更新

Question

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

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

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

有什么建议么？

Answer 1

它看起来像下面

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

Answer 2

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

HTML

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

控制器

 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也没有未定义并设置默认值