[英]Changing class dynamically in AngularJS
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.
我是AngularJS的新手,所以如果您可以分解您的答案,将不胜感激。
And I'm working with OpenWeatherMap API where I want to show the appropriate icons based on the current weather description. 我正在使用OpenWeatherMap API,我想根据当前天气描述显示适当的图标。 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.
对于以后的步骤,我想为所有不同的选项添加一个switch语句,但是我什至无法使其与单个选项一起使用。
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 <i class="wi wi-day-sunny"></i>
." 在github存储库中,它声明“通过使用i元素并添加基类wi以及所需的图标类(例如day-sunny)来显示图标。然后看起来像
<i class="wi wi-day-sunny"></i>
。”
app.js app.js
var classApp= angular.module('weatherApp', []); 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 的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!
谢谢!
I think what you need is ng-class. 我认为您需要的是ng级。
Here is a good example of how to use ng-class: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-class 这是一个如何使用ng-class的好例子: https : //www.w3schools.com/angular/tryit.asp?filename= try_ng_ng-class
The basic idea is that 基本思想是
'ng-class' directive helps to add or remove CSS classes based on AngularJS variables. “ ng-class”指令有助于基于AngularJS变量添加或删除CSS类。
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 您可以在HTML控件中设置它们,例如
<div ng-class="{toBold: setBold, toItalic: setItalic, toUnderline: setUnterline}">
</div>
CSS classes CSS类
.toBold { }
.toItalic { }
.toUnderline { }
As setBold is false, setItalic and setUnderline are true the above div would evaluavate to 由于setBold为false,setItalic和setUnderline为true,因此上述div将评估为
<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. 在这里,expand是一个变量。 fa-plus-circle and fa-minus-circle are font awesome icons.
fa-plus-circle和fa-minus-circle是字体很棒的图标。 Based on expand value either of this icon will be displayed.
根据扩展值,将显示该图标中的任何一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.