AngularJS - 如何用 ng 样式替换框阴影的颜色？

Posted 2023-03-06

【中文标题】AngularJS - 如何用 ng 样式替换框阴影的颜色？

【英文标题】：AngularJS - how to replace colour for a box shadow with ng-style?

【发布时间】：2018-04-21 00:47:22

【问题描述】：

我正在使用 Angular 1.5 编写应用程序。

我正在尝试用动态颜色在我的元素上放置一个盒子阴影。

这是我迄今为止尝试过的：

  <div
    item="item"
    ng-style=" 'box-shadow': 5px 0px 0px 0px  item.colour  inset; "
    ng-repeat="item in vm.items">
</div>

浏览器不断抛出这个错误： 错误：[$parse:lexerr] Lexer Error: Unexpected next character at column 32-32 [#] in expression [ 'box-shadow': 5px 0px 0px 0px #800000 inset; ]。

item.colour 是一个包含十六进制值的字符串。

我也试过这个：

ng-style=" 'box-shadow': 5px 0px 0px 0px item.colour inset; "

它也不起作用。

如何为这种情况编写我的 ng 样式表达式？

【参考方案1】：

在ng-style 属性中，您可以编写一个非常类似于 javascript 的表达式，也就是说，您可以像 javascript 一样连接字符串。

例如：

ng-style=" 'box-shadow': '5px 0px 0px 0px ' + item.colour + ' inset' "

更新 1 工作 sn-p

.box 
  width: 100px;
  height: 100px;
  background-color: grey;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<div ng-app ng-init="item =  colour: '#800000'">
  <div class="box" ng-style=" 'box-shadow': '5px 0px 0px 0px ' + item.colour + ' inset' ">
  </div>
</div>

【讨论】：

它没有抛出错误，但没有显示颜色。 '#800000'

@user1261710 我不知道你的意思，但我已经用一个有效的 sn-p 更新了我的答案并且它正在工作。这是一个嵌入的红色阴影作为你的例子。

嗨，我忘记了 0px 和颜色之间的空格是我的错。有效，谢谢！

【参考方案2】：

您可以通过以下方式编写您的 html：

<div
    item="item"
    ng-style="GetBoxShadowStyle(item)"
    ng-repeat="item in vm.items">
</div>

你的控制器应该有如下方法：

$scope.GetBoxShadowStyle = function (item) 
   var boxShadowStyleVal = '5px 0px 0px 0px ' + item.colour + ' inset' ;
   return  "box-shadow": boxShadowStyleVal  ;
;