Question

我正在开展这个项目，我想要合并这些icons。我是AngularJS的新手，所以如果你能够分解你的答案，那将非常感激。

我正在使用OpenWeatherMap API，我希望根据当前的天气描述显示相应的图标。对于将来的步骤，我想为所有不同的选项添加一个switch语句，但我甚至无法使用单个选项。

在github存储库中，它指出“使用i元素显示图标并添加基类wi，然后添加所需的图标类，例如日照晴。这看起来像<i class="wi wi-day-sunny"></i>。”

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>

我一直在尝试各种方式，动态更改图标，但我卡住了。有人可以提供投入吗？谢谢！

Answer 1

我认为你需要的是ng-class。

以下是如何使用ng-class的一个很好的示例：https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-class

基本理念是

您可以使用$ scope.yourVar来定义变量。
将变量更改为您想要的类名。
将您的i标记更改为以下内容：＆lt; i ng-class =＆＃34; yourVar＆＃34;＆gt;

Answer 2

'ng-class'指令有助于根据AngularJS变量添加或删除CSS类。

如果控制器中有变量

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

您可以在HTML控件中设置它们，例如

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

CSS课程

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

由于setBold为false，setItalic和setUnderline为true，上面的div将评估为

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

像这样的图标，

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

这里expand是一个变量。 fa-plus-circle和fa-minus-circle是字体真棒图标。根据展开值，将显示此图标。

在AngularJS中动态更改类

2 个答案: