1

我正在尝试根据 API 中的其他数据设置从 API 中提取的图像周围的边框颜色和框阴影颜色。基本上，我希望动态加载这些颜色。通过研究，我知道 ng-style 是要走的路，我已经完成了 90% 的路。我在使用 ng 样式的 CSS 中的 API 调用返回的数据时遇到问题。见下文：

相关的html：

<a href="{{item.link}}" target="_blank">
    <img src="{{item.images.standard_resolution.url}}" alt="" class="img-responsive" ng-style="homeColors" id="image">
</a>

来自 Angular 控制器的相关代码：

Stadia.get($scope.id).success(function(response) {
    $scope.shadow = response.prim_hex;
    $scope.border = response.sec_hex;

    $scope.homeColors = {
        "border": "2px solid response.prim_hex",
        "box-shadow": "3px 3px 7px response.sec_hex",
        "margin": "6px",
        "padding": "0"
    }

我对如何将 API 结果（response.prim_hex 和 response.sec_hex）获取到我的 CSS 对象 homeColors 中感到困惑，因此它们被加载到我的 ng-style 指令中。

4

2 回答 2

1

您将变量的名称用作字符串的一部分，而不是对它们进行评估和附加。试试下面的：

Stadia.get($scope.id).success(function(response) {
    $scope.shadow = response.prim_hex;
    $scope.border = response.sec_hex;

    $scope.homeColors = {
        "border": "2px solid " + $scope.shadow,
        "box-shadow": "3px 3px 7px " + $scope.border,
        "margin": "6px",
        "padding": "0"
    }

于 2014-09-17T21:59:13.100 回答
1

这个怎么样？

$scope.shadow = response.prim_hex;
$scope.border = response.sec_hex;

$scope.homeColors = {
    "border": "2px solid " + $scope.shadow,
    "box-shadow": "3px 3px 7px " + $scope.border,
    "margin": "6px",
    "padding": "0"
}

严格来说，您应该检查响应值。

http://jsfiddle.net/xmj2q8Lj/6/

于 2014-09-17T22:10:43.400 回答