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

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -