基於數據值的HTML圖標映射

Question

我使用Spring-Boot和Angular創建基於API的openweather.com的天氣web應用。 我也使用這個weather-icons包。 在我的HTML文件的天氣圖標會顯示如下：

<div class="jumbotron"> 
<i class="wi wi-snow" style="font-size: 8em;"></i> 
<i id="description">{{weather.weatherID}}</i> 
</div> 

隨着API的幫助下，我也有在HTML提供氣象碼值。

比方說，我有一個文件weather.data與天氣代碼映射到圖標描述是這樣的：

601: snow 
602: sleet 
611: rain-mix 

是否有可能基於在數據文件中值HTML顯示某些圖標？ 我想要做的是一樣的東西：

<div class="jumbotron"> 
    <i class="wi wi-{{weatherDescription}}" style="font-size: 8em;"></i> 
</div> 

Answer 1

您可以從weather.data的範圍內可變讓您的數據。

這將是這樣的：

在控制器：

$http.get(path of weather.data file, null, function(response){ 
    $scope.weatherList = response; //do angular.fromJson if required 
}); 

我希望你得到一個JSON對象：

$scope.weatherList = { 
    601: "snow", 
    602: "sleet", 
    611: "rain - mix" 
} 

如果你正在從服務器天氣代碼方在weatherDescription，那麼你可以在html上使用它像這樣：

在HTML：

<div class="jumbotron"> 
    <i class="wi wi-{{weatherList[weatherDescription]}}" style="font-size: 8em;"></i> 
</div> 

我希望這對你的作品。