在 AngularJS 中动态更改类答案

【问题标题】：Changing class dynamically in AngularJS在 AngularJS 中动态更改类
【发布时间】：2017-12-03 20:28:14
【问题描述】：

我正在从事这个项目，我想将这些icons 合并到其中。我对 AngularJS 很陌生，所以如果你能分解你的答案，我们将不胜感激。

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

在 github 存储库中，它声明“通过使用 i 元素并添加基类 wi 和所需的图标类来显示图标，例如 day-sunny。然后看起来像 <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>

我一直在尝试各种方法来动态更改图标，但我被卡住了。任何人都可以提供输入吗？谢谢！

【问题讨论】：

docs.angularjs.org/api/ng/directive/ngClass
What is the best way to conditionally apply a class?的可能重复
@SaravananSachi 我在谷歌搜索 2 小时时也遇到了这个问题，但如前所述，我对 angularjs 很陌生。我不太明白答案在说什么。如果你能为我分解它，那将不胜感激。谢谢！

标签： javascript angularjs

【解决方案1】：

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

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

基本思想是

您可以使用 $scope.yourVar 来定义一个变量。
将变量更改为所需的类名。
将您的 i 标签更改为：

【讨论】：

在 app.js 中我写了 "$scope.weatherClass = "wi wi-owm-731"; 我尝试在 HTML 中通过声明 。但它不起作用。有什么原因吗？
先试试这个：bbbbbb
我刚试过，它只显示“bbbbbb”而不是实际图标
有效！但是你能解释一下我之前做错了什么吗？我之前说过 var vm = $scope;然后声明 vm.weatherClass = "wi wi-owm-731"，我相信这是一回事。那么我做错了什么？谢谢！！
哈哈，事实上我在 JSFiddle 上尝试时遇到了同样的问题。刷新浏览器后，一切都突然正常了。我们可能需要每次都进行硬刷新。 :P

【解决方案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 为假，setItalic 和 setUnderline 为真，上述 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 是字体很棒的图标。根据展开值，将显示此图标中的任何一个。

【讨论】：