基于数据值的HTML图标映射

Question

我正在使用Spring-Boot和Angular从 openweather.com 创建一个基于API的天气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>

我希望这适合你。