AngularJS - 动态更新 ng-class 名称

Question

在 AngularJS 中使用 animate.css。我正在尝试在 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>

在控制器中：

$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>

Answer 2

你有多余的双花括号，改为：

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

Answer 3

Angular 也可以将数组作为类：https://docs.angularjs.org/api/ng/directive/ngClass

所以你可以用你的控制器构建你的数组并将它绑定到 ngClass

ng-class="classArray"

$scope.classArray = [...]

Answer 4

试试这个：

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