AngularJS

Question

我正在用 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 错误：表达式 [{ 'box-shadow': 5px 0px 0px 0px #800000 inset; 中第 32-32 列 [#] 的意外下一个字符； }].

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

我也试过这个：

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

而且它也不起作用。

如何为这种情况编写 ng 风格的表达式？

Answer 1

在 ng-style 属性中，您可以编写一个与 javascript 非常相似的表达式，也就是说，您可以使用与 javascript 相同的方式连接字符串。

例如：

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

更新 1 工作片段

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

Answer 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  };
};

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

AngularJS - how to replace colour for a box shadow with ng-style?

css

ng-style