动态添加数据时如何应用 ng-class (?)

Question

我有一个使用 Ionic/Angular 运行的应用程序，我只需要应用一个来自 animate.css library 的类，我这里有这个函数，一旦你调用 $scope.addLineToBetSlip() 就可以工作，我想要那个类一旦你调用该函数，我提到的工作：

$scope.addLineToBetSlip = function(line, row, type) {
  $scope.picksCount = !$scope.picksCount;
  var spreadSelected = (row.spreadSelected && type === 'spread'),
    totalSelected = (row.totalSelected && type === 'total'),
    moneyLineSelected = (row.moneyLineSelected && type === 'moneyline');
  if (spreadSelected || totalSelected || moneyLineSelected) {
    BetSlipFactory.remove(line, row, type);
  }else {
    BetSlipFactory.add(line, row, type);
  }
  return $scope.picksCount;
};

这是我的错误 HTML：

更新

只需更改我的代码，现在可以工作，但只是第一次{{betSlipCount}} chenges

<span class="badge badge-assertive animate infinite"
      ng-class="{bounceIn: picksCount}">{{betSlipCount}}</span>
<i class="icon ion-code-download"></i>

我看到的另一种方式是，{{betSlipCount}} 不断变化，实际上每次调用$scope.addLineToBetSlip() 时{{betSlipCount}} 都会发生变化，所以另一种方式是每次{{betSlipCount}} 变化时激活该类。

Answer 1

我使用 ng-class 已经有一段时间了，但我很确定语法是：
ng-class="{'className': booleanVariable}"
（意味着你已经得到了类名和变量）
（您也可能想尝试用单引号将类名括起来，但我不确定这是否有必要）

布尔变量可以是返回布尔变量的函数，即：
ng-class="{'fadeIn': addLineToBetSlip()}"

但您的函数似乎没有返回布尔变量。您可以让它在 $scope 中切换一个布尔变量，并使用该变量名称而不是函数，或者您可以让函数返回 true。

但我也不确定为什么您不总是希望 'fadeIn' 类处于活动状态。

也许您可以告诉我们更多关于您的代码应该做什么以及它当前正在做什么。

更新
控制器代码：

//Intialize the boolean variable
$scope.picksCount = false;

$scope.addLineToBetSlip = function(line, row, type) {
    var spreadSelected = (row.spreadSelected && type === 'spread');
    var totalSelected = (row.totalSelected && type === 'total');
    var moneyLineSelected = (row.moneyLineSelected && type === 'moneyline');

    if (spreadSelected || totalSelected || moneyLineSelected)
    {
        BetSlipFactory.remove(line, row, type);
    }
    else
    {
        BetSlipFactory.add(line, row, type);
    }

    $scope.picksCount = !$scope.picksCount;

};

HTML 代码：

<span class="badge badge-assertive animate infinite" ng-class="{'bounceIn': picksCount}">{{betSlipCount}}</span>
<i class="icon ion-code-download"></i>