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

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

HTML

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

控制器

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

Answer 2

我怀疑您需要求助于使用控制器方法：

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

HTML

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

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

Answer 3

它看起来就像下面这样

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

Rgba 值未以 ng 样式更新

Rgba value is not updated in ng-style

javascript

css

angularjs

angularjs-ng-change

ng-style