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

Question

I have an application running with Ionic/Angular, all I need is to apply a class which is from the animate.css library, I have here this function which is the one working once you call $scope.addLineToBetSlip() and I want that class that I mentioned working once you call that function:

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

here is my wrong HTML:

UPDATE

just change my code, is working now but only the first time that {{betSlipCount}} chenges

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

the other way I see, is that {{betSlipCount}} is constantly changing, actually {{betSlipCount}} changes every time you call $scope.addLineToBetSlip(), so the other way is activating that class every single time that {{betSlipCount}} changes.

please see [conditionally applied classes](http://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class) — Patrick Motard, Jan 22 '15 at 21:05
You probably got `ng-class` wrong: it accepts an object in which the *key* is the *name of the CSS class*, while the value is the condition to evaluate that, when `true`, applies the class to the element. — Nikos Paraskevopoulos, Jan 22 '15 at 21:07
and how I can apply that every single time ```$scope.addLineToBetSlip``` is called? or when ```{{betSlipCount}}``` ? — Reacting, Jan 22 '15 at 21:11
This question is a mess. Numerous code changes in edits, no scope reference connecting script and elements and mention of all sorts of disconnected variables/functions. Create a demo that replicates your problem — charlietfl, Jan 22 '15 at 22:49

Tim Aagaard · Accepted Answer · 2015-01-22T22:57:29.630

1

It's been a while since I've used ng-class but I'm pretty sure the syntax is:
ng-class="{'className': booleanVariable}"
(meaning you've got the class name and variable backwards)
(also you may want to try enclosing the class name in single quotes, though I'm not sure if that's necessary)

The boolean variable can be a function that returns a boolean variable ie:
ng-class="{'fadeIn': addLineToBetSlip()}"

But it doesn't appear that your function returns a boolean variable. You could have it toggle a boolean variable in $scope, and use that variable name instead of the function, or you could have the function return true.

But I'm also not sure why you wouldn't just always want the 'fadeIn' class active.

Maybe you could tell us more about what your code is supposed to do and what it is currently doing.

UPDATE
Controller Code:

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

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

edited Jan 22 '15 at 22:57

answered Jan 22 '15 at 21:18

Tim Aagaard

518
5
10

look at my update on the question please. Is working now, but only the first time you call the function. – Reacting Jan 22 '15 at 21:21
@TheUnnamed We need more information...what is betSlipCount? You act like it's a boolean, but it sounds like an integer. If you want the class to be turned on / off each time an integer changes then you use a $scope variable and have your function do something like `boolVariable = !boolVariable;` – Tim Aagaard Jan 22 '15 at 22:16
@TheUnnamed it has to be a boolean. It's probably getting type-casted to a boolean and 0 = false; every other number = true. – Tim Aagaard Jan 22 '15 at 22:33
look at my code again, I add ```$scope.picksCount = !$scope.picksCount;``` and at the end ```return $scope.picksCount === !$scope.picksCount;``` because I need that class applied if the integer goes down or up, but still not working as expected. – Reacting Jan 22 '15 at 22:36
I just record this video in order for you to take a look at the behavior, just watch the little red circle in the right down corner is not working as expected, I need it working every time you click on those buttons https://www.youtube.com/watch?v=Ho0aicpqnsM&feature=youtu.be – Reacting Jan 22 '15 at 22:40
@TheUnnamed if you return `$scope.picksCount === !$scope.picksCount` then it's always going to return false. I'm assuming your controller has something like $scope.picksCount = false; to set the initial value. You have two options: You can either remove the return line entirely and base the ng-class on the `picksCount` variable, or change the return line to `return $scope.picksCount;` and continue using the function in the ng-class line. – Tim Aagaard Jan 22 '15 at 22:41
only one more question, what happen if I put ```$scope.picksCount = false;``` inside the function ```$scope.addLineToBetSlip()``` ? – Reacting Jan 22 '15 at 23:02
1

It will make the class always apply or never apply depending on whether you put it above the line `$scope.picksCount = !$scope.picksCount`, (probably not what you want), if you want to switch the order of when it's applied / not applied, change the initial value to true (first line of my update) – Tim Aagaard Jan 22 '15 at 23:06

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

1 Answers1