我正在用 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] 词法分析器错误：在表达式 [{ 'box-shadow': 5px 0px 0px 0px #800000 inset; 32-32 [#] 列中出现意外的下一个字符；}]。
item.colour 是一个带有十六进制值的字符串。
我也试过这个：
ng-style="{ 'box-shadow': 5px 0px 0px 0px item.colour inset; }"
它也不起作用。
我如何为这种情况编写我的 ng 风格表达式？
在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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句