在AngularJS中动态更改类

我正在做一个项目，想要整合这些图标。我对于AngularJS很陌生，所以如果您能够把您的答案分解开说明会非常感激。

我正在使用OpenWeatherMap API，希望根据当前的天气描述显示相应的图标。对于未来的步骤，我想为所有的不同选项添加一个开关语句，但是我甚至不能使它在单个选项上工作。

在 github 代码库中，它说明了“通过使用 i 元素并添加基本类 wi，然后添加您想要的图标类别，例如 day-sunny，如下所示：。”

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

//works when it's explicitly stated
//trying to call this class
 //trying to call weatherClass2 back in app.js

我一直试图以各种方式动态更改图标，但我卡住了。有人能提供意见吗？谢谢！