动态添加数据时如何应用 ng 类 (?）

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

本文关键字：添加 ng 应用 何应用 动态 数据      更新时间：2023-09-26

我有一个运行Ionic/Angular的应用程序，我所需要的只是应用一个来自animate.css库的类，我这里有这个函数，一旦你调用$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}}发生变化时激活该类。

自从我使用 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;
};

网页代码：

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