html - AngularJS - 动态更新 ng 类名称

Question

使用 animate.css与 AngularJS。我正在尝试将一个类应用于 ng-click 上的元素，但该元素没有得到更新。我尝试了多种方法(使用函数更新范围值等)，但没有任何乐趣。基本上，我想在单击按钮 1 或按钮 2 时相应地向动画元素添加 'fadeIn'、'fadeOut' 和 'flipIn'、'flipOut'。

<button ng-click="animate = !animate; classIn = 'fadeIn'; classOut = 'fadeOut'" class="btn btn-default">Fade</button>

<button ng-click="animate = !animate; classIn = 'flipIn'; classOut = 'flipOut'" class="btn btn-default">Flip</button>

<div class="animated-wrapper">
  <h1 class="text-center animated" ng-class="{'{{classIn}}': animate, '{{classOut}}': !animate}">Animation</h1>
</div>

谢谢

编辑:稍微修改一下代码后，我想出了一个解决方案(稍微修改一下@hadiJZ 的回答):

<button ng-click="setAnimateClass(animate = !animate, 'fadeIn', 'fadeOut')" class="btn btn-default">Fade</button>

<button ng-click="setAnimateClass(animate = !animate, 'bounceIn', 'bounceOut')" class="btn btn-default">Bounce</button>

<div class="animated-wrapper">
    <h1 class="text-center animated" ng-class="animateClass">Animation</h1>
</div>

在 Controller 中:

$scope.animate = true;

$scope.setAnimateClass = function (animate, classIn, classOut) {
  if (animate) {
    $scope.animateClass = classIn;
  } else {
    $scope.animateClass = classOut;
  }
};

Answer 1

您必须将类名放在单引号中。我举个简单的例子。

var myapp = angular.module('myapp', []);
myapp.controller('Ctrl', function ($scope) {
  var vm = this;
  vm.animate = true;
  vm.cssVal = "";
  
  vm.addFadeClass = function(animate){
    if(animate)
      vm.cssVal = "fadeIn";
    else
       vm.cssVal = "fadeOut";
    
    }
  vm.addFlipClass = function(animate){
    if(animate)
      vm.cssVal = "flipIn";
    else
       vm.cssVal = "flipOut";
    
    }
  
  
});

.fadeIn{
  color: red;
  }

.fadeOut{
  color:blue;
  }
.flipIn{
  font-size:20px;
  }

.flipOut{
  font-size:40px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="Ctrl as vm">
 <button ng-click="vm.addFadeClass((animate = !animate))" class="btn btn-default">Fade</button>
<button ng-click="vm.addFlipClass((animate = !animate))" class="btn btn-default">Flip</button>


<div class="animated-wrapper">
  <h1 class="text-center animated" ng-class="vm.cssVal" >Animation</h1>
</div>
  
</div>