我正在从事这个项目，我想在其中合并这些 icons .我是 AngularJS 的新手，所以如果您能分解您的答案，我们将不胜感激。
我正在使用 OpenWeatherMap API，我想根据当前的天气描述显示适当的图标。对于以后的步骤，我想为所有不同的选项添加一个 switch 语句，但我什至不能让它与单个选项一起工作。
在 github 存储库中，它指出“图标是通过使用 i 元素并添加基类 wi 然后添加您想要的图标类(例如 day-sunny)来显示的。这看起来像 <i class="wi wi-day-sunny"></i>。”
应用程序.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>
我一直在尝试各种方法来动态更改图标，但我被卡住了。任何人都可以提供意见吗？谢谢!
最佳答案
我认为你需要的是 ng-class。
这是一个如何使用 ng-class 的好例子:https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-class
基本思路是
- 您可以使用 $scope.yourVar 来定义变量。
- 将变量更改为您想要的类名。
- 将您的 i 标签更改为如下内容:
关于javascript - 在 AngularJS 中动态更改类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44836958/