Klasse dynamisch in AngularJS ändern

Question

Ich arbeite an diesem Projekt, wo ich diese icons integrieren möchte. Ich bin sehr neu in AngularJS, also wenn Sie bitte Ihre Antworten aufschlüsseln können, würde das sehr geschätzt werden.

Und ich arbeite mit OpenWeatherMap API, wo ich die entsprechenden Symbole basierend auf der aktuellen Wetterbeschreibung anzeigen möchte. Für zukünftige Schritte möchte ich eine switch-Anweisung für all die verschiedenen Optionen hinzufügen, aber ich kann es nicht einmal mit einer einzigen Option arbeiten lassen.

In Github-Repository heißt es: "Die Symbole werden angezeigt, indem Sie ein i-Element verwenden und die Basisklasse wi und dann die gewünschte Symbolklasse hinzufügen, z. B. tag-sonnig. Dies sieht dann wie <i class="wi wi-day-sunny"></i> aus."

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> 

Ich habe verschiedene Möglichkeiten versucht, dynamisch auf das Symbol zu ändern, aber ich bin fest. Kann jemand bitte Eingaben machen? Vielen Dank!

Answer 1

Ich denke, was Sie brauchen, ist ng-Klasse.

Hier ist ein gutes Beispiel dafür, wie ng-Klasse zu verwenden: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-class

Die Grundidee ist, dass

1. Sie $ scope.yourVar verwenden können, um eine Variable zu definieren.
2. Ändern Sie die Variable in den gewünschten Klassennamen.
3. Änderung Ihrer i-Tag etwas wie folgt aus: < i ng-class = "yourVar">

Answer 2

'ng-Klasse' Richtlinie hilft CSS-Klassen basierend auf AngularJS Variablen hinzufügen oder entfernen.

Wenn Sie Variablen in einem Controller haben als

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

Sie können sie in einem HTML-Control gesetzt wie

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

CSS-Klassen

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

Als setBold falsch ist, setItalic und setUnderline sind wahr, das obige div würde zu

evaluieren

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

wie dieses Symbol,

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

Hier erweitern ist eine Variable. fa-plus-circle und fa-minus-circle sind tolle Icons. Basierend auf dem erweiterten Wert wird entweder dieses Symbol angezeigt.