基于数据值的HTML图标映射

Question

我正在创建一个基于API的天气网络应用程序，使用Spring和openweather.com。我也在使用这个天气图标包。在我的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>

我希望这对你有用。