1

API からの他のデータに基づいて、API から引き出された画像の周りに境界線の色とボックスの影の色を設定しようとしています。基本的に、これらの色を動的にロードする必要があります。調査を通じて、私は ng-style が進むべき道であることを知っており、私はその道の 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 ディレクティブに読み込まれます。

4

2 に答える 2

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 に答える
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 に答える