动态添加数据时如何应用 ng-class（？）

Question

我有一个应用程序运行 Ionic/Angular，我只需要应用一个来自 animate.css library 的 class，我这里有这个功能，它是一个在你调用 $scope.addLineToBetSlip() 后工作，我希望我提到的那个 class 在你调用该函数后工作：

$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}} 不断变化，实际上 {{betSlipCount}} 每次调用 $scope.addLineToBetSlip() 都会改变，所以另一种方式是激活 class ] 每次 {{betSlipCount}} 改变。

Answer 1

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

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

但您的函数 return 似乎不是布尔变量。你可以让它在 $scope 中切换一个布尔变量，并使用那个变量名而不是函数，或者你可以让函数 return true.

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

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

更新
控制器代码：

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

动态添加数据时如何应用 ng-class（？）

How to apply an ng-class when data is added dynamically (?)

javascript

angularjs

ionic-framework

animate.css