Question

我在后端有一个选项，可以让用户更改默认状态和悬停状态下的图标。这是代码

ng-class="{'{{getAnswerButtonHoverIcon()}}':hovering, '{{getAnswerButtonIcon()}}' : !hovering}

但是问题是，当用户为默认状态和悬停状态选择相同的图标时，例如他们选择了“ fa-circle-o”，则HTML的输出将为

ng-class="{'fa-circle-o':hovering, 'fa-circle-o' : !hovering}"

，它不再起作用。当我尝试对其进行测试时，它将在悬停时删除“ fa-cricle-o”类。知道为什么会这样吗？如果您可以提出更好的解决方案，我们将不胜感激。谢谢！

Answer 1

我在评论中提到我可能只有一个功能，但是我认为我一开始误解了您的问题。在约书亚方法的基础上，这可能对您有用：如果两个函数返回相同的值，则它仍然有效。

我觉得这不是最好的解决方案，因为它正在将字符串生成到类中，但是可以将其更改为ng-class和{hovering？ sg（）：sgelse（）}作为值。我希望它能为您展示一种处理此类互动的方法。

让我知道它是否有效，以便我们进一步为您提供帮助。

var app = angular.module("mainModule",[]);

app.controller("mainCtrl", function($scope){
  $scope.icon = {};
  $scope.icon.hovering = false;
  
  $scope.getAnswerButtonHoverIcon = function(){
    return 'bluebg';
  };
  
  $scope.getAnswerButtonIcon = function(){
    return 'redbg';
  };
  
});

.bluebg{background-color:blue}
.redbg{background-color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="mainModule">
  <div ng-controller="mainCtrl">
    <div  class="{{ icon.hovering ? getAnswerButtonHoverIcon() : getAnswerButtonIcon() }}"
          ng-mouseenter="icon.hovering = true" ng-mouseleave="icon.hovering = false">
      <p>I have different backgrounds</p>
    </div>
  </div>
</div>

Answer 2

您也可以像这样使用ng-class，它将只应用函数输出的类：

ng-class="(hovering ? '{{getAnswerButtonHoverIcon()}}': '{{getAnswerButtonIcon()}}')

AngularJS在不同条件下对同一个类进行分类

2 个答案: