如何获取角度 js 表达式以考虑来自 api 的 css 值并将其应用于其卡答案

【问题标题】：How to get angular js expressions to consider css values from the api and apply it to its card如何获取角度 js 表达式以考虑来自 api 的 css 值并将其应用于其卡
【发布时间】：2019-01-27 20:36:06
【问题描述】：

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

我已经完成了名称、描述和图像等数据的检索。我使用了 angular-js 指令来获取数据。同样，API 包含每个卡片的 CSS 样式。我怎样才能获得就像我使用 angular-js 呈现的信息一样，特定卡直接从 API 应用到其各自的卡。

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>

【问题讨论】：

标签： javascript html css angularjs json

【解决方案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>

【讨论】：