Changing class dynamically in AngularJS

Question

I'm working on this project where I want to incorporate these icons. I'm very new to AngularJS so if you can please breakdown your answers that would be greatly appreciated.

And I'm working with OpenWeatherMap API where I want to show the appropriate icons based on the current weather description. For future steps, I want to add a switch statement for all of the different options, but I can't even make it work with a single option.

In github repository, it states "The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. This then looks like ."

app.js

var classApp= angular.module('weatherApp', []);

classApp.controller('weatherCtrl', function($scope, $http){
  var vm = $scope;
  };



  $http.get("http://ip-api.com/json").success(function(data){
  vm.lat= data.lat;
  vm.lon=data.lon;
 var apiKey=  "key"; //removed key
 var openWeatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+ vm.lat + "&lon="+vm.lon+ "&appid=" +apiKey;

$http.get(openWeatherURL).success(function(data){

**vm.weatherClass= "wi wi-owm-731"; //USING THIS LINE FOR NOW**

// Hour between sunset and sunrise being night time
var night = false;
**vm.weatherClass2 =  $("#icon").attr("class", " wi wi-showers");**

        //function that gets icon based on description

          // if(data.weather[0].id >= 200 && data.weather[0].id < 300){
          //   $("#icon").attr("class", " wi wi-thunderstorm");
          // }

          // if(data.weather[0].id >= 300 && data.weather[0].id < 400){
          //   $("#icon").attr("class", " wi wi-sprinkle");
          // }

          // if(data.weather[0].id >= 500 && data.weather[0].id < 600){
          //   if(data.weather[0].id == 500 || data.weather[0].id >= 520){
          //     $("#icon").attr("class", "wi wi-rain")
          //   }
          //   $("#icon").attr("class", " wi wi-showers");
          // }

          // if(data.weather[0].id >= 600 && data.weather[0].id < 700){
          //   $("#icon").attr("class", " wi wi-snow");
          // }

          // if(data.weather[0].id >= 700 && data.weather[0].id < 800){
          //   $("#icon").attr("class", " wi wi-fog");
          // }

          // if(data.weather[0].id == 800){
          //   $("#icon").attr("class", " wi wi-day-sunny");
          // }

          // if(data.weather[0].id == 801){
          //   $("#icon").attr("class", " wi wi-day-sunny-overcast");
          // }

          // if(data.weather[0].id == 802){
          //   $("#icon").attr("class", " wi wi-day-cloudy");
          // }

          // if(data.weather[0].id == 803 || data.weather[0].id == 804){
          //   $("#icon").attr("class", " wi wi-cloudy");
          // }

          // if(data.weather[0].id == 900){
          //   $("#icon").attr("class", " wi wi-tornado");
          // }

          // if(data.weather[0].id == 901 || data.weather[0].id == 960 || data.weather[0].id == 961){
          //   $("#icon").attr("class", " wi wi-thunderstorm");
          // }

          // if(data.weather[0].id == 902 || data.weather[0].id == 962){
          //   $("#icon").attr("class", " wi wi-hurricane");
          // }

          // if(data.weather[0].id == 903){
          //   $("#icon").attr("class", " wi wi-snowflake-cold");
          // }

          // if(data.weather[0].id == 904){
          //   $("#icon").attr("class", " wi wi-hot");
          // }

          // if(data.weather[0].id == 905){
          //   $("#icon").attr("class", " wi wi-strong-wind");
          // }

          // if(data.weather[0].id == 906){
          //   $("#icon").attr("class", " wi wi-hail");
          // }

          // if(data.weather[0].id == 951){
          //   $("#icon").attr("class", "wi wi-day-sunny");
          // }

          // if(data.weather[0].id >= 952 && data.weather[0].id <= 956){
          //   $("#icon").attr("class", "wi wi-windy");
          // }

          // if(data.weather[0].id >= 957 && data.weather[0].id <= 959){
          //   $("#icon").attr("class", "wi wi-strong-wind");
          // }






});

  });
});

index.html

<body ng-app="weatherApp" ng-controller="weatherCtrl" class= "text-center info">

<i id="weatherClass2"></i>
<i class="wi wi-owm-731" style="font-size: 75px"></i>//works when it's explicitly stated
<i ng-class="weatherClass" style="font-size: 75px"></i>//trying to call this class
<i id="icon"></i> //trying to call weatherClass2 back in app.js

</body>

I've been trying various ways, to change the icon dynamically but I'm stuck. Can anyone please provide inputs? Thank you!

Possible duplicate of What is the best way to conditionally apply a class? — Saravanan Sachi
– Saravanan Sachi, Commented Jun 30, 2017 at 0:41
@SaravananSachi I came across this question too when googling for 2 hours, but as stated I'm very new to angularjs. I didn't quite understand what answers were talking about. If you can break it down for me, that would be greatly appreciated. Thank you! — hiswendy
– hiswendy, Commented Jun 30, 2017 at 0:52

Jack Luo · Accepted Answer · 2017-06-30 00:52:43Z

5

I think what you need is ng-class.

Here is a good example of how to use ng-class: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-class

The basic idea is that

you can use $scope.yourVar to define a variable.
change the variable to the class name you desire.
change your i tag to something like this:

answered Jun 30, 2017 at 0:52

Jack Luo

4515 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hiswendy Over a year ago

In app.js I wrote "$scope.weatherClass = "wi wi-owm-731"; and I tried calling it in the HTML by stating . But it didn't work. Any reason why?

Jack Luo Over a year ago

try this first: bbbbbb

hiswendy Over a year ago

I just tried that and it only shows "bbbbbb" but not actual icon

hiswendy Over a year ago

It works! But could you explain what I was doing wrong earlier? I declared earlier where I said var vm = $scope; and then stated vm.weatherClass = "wi wi-owm-731", which I believe is the same thing. So what did I do wrong? Thank you!!

Jack Luo Over a year ago

Haha, in fact I got the same issue when I tried it on JSFiddle. After I refresh my browser, everything suddenly works. We may need to do hard refresh each time. :P

Saravanan Sachi · Accepted Answer · 2017-06-30 01:09:52Z

'ng-class' directive helps to add or remove CSS classes based on AngularJS variables.

If you have variables in a controller as

$scope.setBold = false;
$scope.setItalic = true;
$scope.setUnderline = true;

You can set them in a HTML control like

<div ng-class="{toBold: setBold, toItalic: setItalic, toUnderline: setUnterline}">
</div>

CSS classes

.toBold { }
.toItalic { }
.toUnderline { }

As setBold is false, setItalic and setUnderline are true the above div would evaluavate to

<div class="setItalic setUnderline"></div>

Like this for icon,

<i class="fa" ng-class="{'fa-plus-circle': !expand, 'fa-minus-circle': expand}">

Here expand is a variable. fa-plus-circle and fa-minus-circle are font awesome icons. Based on expand value either of this icon will be displayed.

Collectives™ on Stack Overflow

Changing class dynamically in AngularJS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related