簡體   English   中英

動態添加數據時如何應用ng-class(?)

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

我有一個運行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:

UPDATE

只需更改我的代碼即可,現在可以正常工作,但是只有{{betSlipCount}}第一次出現

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

我看到的另一種方式是{{betSlipCount}}不斷變化,實際上{{betSlipCount}}每次您調用$scope.addLineToBetSlip()時都會變化,因此另一種方式是每次{{betSlipCount}}變化。

自從我使用ng-class已經有一段時間了,但是我很確定語法是:
ng-class="{'className': booleanVariable}"
(這意味着您已經有了類名和向后的變量)
(也可以嘗試用單引號將類名引起來,盡管我不確定是否有必要)

布爾變量可以是返回布爾變量的函數,即:
ng-class="{'fadeIn': addLineToBetSlip()}"

但是似乎函數沒有返回布爾變量。 您可以讓它切換$ scope中的布爾變量,並使用該變量名代替函數,或者可以使函數返回true。

但是我也不確定為什么您不總是希望'fadeIn'類處於活動狀態。

也許您可以告訴我們更多有關您的代碼應該做什么以及當前正在做什么的信息。

UPDATE
控制器代碼:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM