Как получить угловые выражения js, чтобы рассмотреть значения CSS из API и применить его к своей карте

Question

Я создаю карты покемонов, которые берут данные из API.Как я могу получить CSS конкретной карты, которая будет применена к соответствующей карте непосредственно из API, точно так же, как информация, которую я предоставил с помощью angular-js.

Я закончил, извлекая данные, такие как имя,description и image.I использовал директивы 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, чтобы применить стили из данных вашего контроллера к элементам списка.Что-то вроде:

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