javascript - 如何获取 Angular js 表达式以考虑来自 api 的 css 值并将其应用于其卡片

Question

我正在创建从 API 获取数据的口袋妖怪卡片。我怎样才能让特定卡片的 CSS 直接从 API 应用于其各自的卡片，就像我使用 angular-js 呈现的信息一样。

我已经完成了名称、描述和图像等数据的检索。我使用 angular-js 指令来获取数据。同样，API 由每张卡片的 CSS 样式组成。如何获取 CSS一张特定的卡片直接从 API 应用于其各自的卡片，就像我使用 angular-js 呈现的信息一样。

JSON:

[{
"cardColors": {
    "bg": "#47C67B",
    "imgbg": "#80EDAC",
    "tagbg": "#8edbae",
    "text": "#ffffff",
    "textbg": "#66CF91"
},
"description": "Bulbasaur is a small quadruped Pokemon that has turquoise skin with darker teal patches ",
"name": "Bulbasaur",
"sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
"tag": "Grass"
 }, {
"cardColors": {
    "bg": "#f88321",
    "imgbg": "#ffb047",
    "tagbg": "#fab275",
    "text": "#ffffff",
    "textbg": "#f99847"
},
"description": "Pikachu is a Mouse Pokemon and the evolved form of 
 Pichu. Pikachu's tail is sometimes struck by lightning as it raises it to 
check its surroundings.",
"name": "Pikachu",
"sprite":  "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png",
"tag": "Electric"

}]

JS:

var app = angular.module('myApp', []);
app.controller('pokemonCtrl', function($scope, $http) {
$http.get("pokemondata.json").then(function (response) {
  $scope.myData = response.data;
 });

});

HTML:
 <div class="container" ng-app="myApp" ng-controller="pokemonCtrl">
<div class="row"> 
     <div class="col-sm-4" ng-repeat="x in myData">
        <h4>{{x.name}}</h4><br/>
        <p>{{x.description}}</p><br/>
        <img class="cards" ng-src="{{x.sprite}}"><br/>
    </div>
</div>
</div>

Answer 1

你应该使用 ngStyle将 Controller 数据中的样式应用到列表元素。像这样的东西:

<div class="row"> 
     <div class="col-sm-4" ng-repeat="x in myData" ng-style="{'background-color': x.bg, color: x.text}">
        <h4>{{x.name}}</h4><br/>
        <p ng-style="{'background-color': x.textbg}">{{x.description}}</p><br/>
        <img class="cards" ng-src="{{x.sprite}}"><br/>
    </div>
</div>