Question

我正在尝试更改使用字体真棒库创建的元素上的类。基本上，我想要初始加载心脏没有被填写并且有类 - ＆＃39;远＆＃39;然后点击按钮我希望心脏改变到充满心脏的类 - ＆＃ 39; FAS＆＃39 ;.它确实显示了“远”。关于初始加载的课程，但不会更改为“＃fas;＆＃39;单击按钮时的类。

HTML：

<button class="favorite-btn" ng-click="favMovie()">
  <i ng-class="{'fas' : toggle, 'far' : !toggle}" class="fa-heart"></i>
</button>

JS：

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
      console.log($scope.toggle);

      $scope.toggle = !$scope.toggle;

      console.log($scope.toggle);
    }
});

我搜索了其他堆栈问题/答案，没有任何帮助。

这在控制台中确认它实际上正在改变切换状态（toggle === true || toggle === false），但不改变类。

演示：

＆＃13;

// Code goes here

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
			console.log($scope.toggle);
			
			$scope.toggle = !$scope.toggle;
			
			console.log($scope.toggle);
		}
});

＆＃13;

/* Styles go here */

button {width:150px; height:150px; font-size:5em;}

＆＃13;

<!DOCTYPE html>
<html ng-app="movieApp">

  <head>
    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="lib/angular/angular.min.js"></script>-->
    <script src="script.js"></script>
  </head>

  <body ng-controller="DetailsController">
    <button class="favorite-btn" ng-click="favMovie()">
      <i ng-class="{'fas' : toggle, 'far' : !toggle}" class="fa-heart"></i>
    </button>
  </body>
  
  <!-- {{heartClass}}  {'fas' : toggle, 'far' : !toggle} -->

</html>

＆＃13;

非常感谢任何帮助！

Answer 1

因为您使用FA图标作为JS，图标将呈现为SVG格式。因此，SVG不是您在Angular功能中所期望和影响的正常元素。你应该尝试另一种方法来处理这个问题。请查看我的代码段：

＆＃13;

// Code goes here

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
			$scope.toggle = !$scope.toggle;
		}
});

＆＃13;

/* Styles go here */

button {width:150px; height:150px; font-size:5em;}

＆＃13;

<!DOCTYPE html>
<html ng-app="movieApp">

  <head>
    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="lib/angular/angular.min.js"></script>-->
    <script src="script.js"></script>
  </head>

  <body ng-controller="DetailsController">
    <button class="favorite-btn" ng-click="favMovie()">
      <span ng-if="!toggle"><i class="far fa-heart"></i></span>
      <span ng-if="toggle"><i class="fas fa-heart"></i></span>
    </button>
  </body>
  
  <!-- {{heartClass}}  {'fas' : toggle, 'far' : !toggle} -->

</html>

＆＃13;

AngularJS在ng-click上切换fontAwesome类

1 个答案: