Question

我正在尝试根据API中的其他数据设置从API中提取的图像周围的边框颜色和框阴影颜色。基本上，我希望动态加载这些颜色。通过研究我知道ng风格是要走的路，我90％的方式。我在使用ng-style的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指令中。

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

Answer 2

怎么样？

$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/

我可以在Angular ng-style指令中使用来自API调用的数据吗？

2 个答案: