spring boot - HTML icons mapping based on data value -
i creating weather web app based on api openweather.com using spring-boot , angular. using weather-icons package. in html file weather icons displayed this:
<div class="jumbotron"> <i class="wi wi-snow" style="font-size: 8em;"></i> <i id="description">{{weather.weatherid}}</i> </div>
with of api have weather code value available in html.
let's have file weather.data weather codes mapped icon description this:
601: snow 602: sleet 611: rain-mix
is possible display icon in html based on value in data file? want like:
<div class="jumbotron"> <i class="wi wi-{{weatherdescription}}" style="font-size: 8em;"></i> </div>
you can data weather.data in scope variable.
it like:
in controller:
$http.get(path of weather.data file, null, function(response){ $scope.weatherlist = response; //do angular.fromjson if required });
i hope getting json object :
$scope.weatherlist = { 601: "snow", 602: "sleet", 611: "rain - mix" }
if getting weather code server side in weatherdescription, can use on html :
in html:
<div class="jumbotron"> <i class="wi wi-{{weatherlist[weatherdescription]}}" style="font-size: 8em;"></i> </div>
i hope works you.
Comments
Post a Comment