AngularJs ng-class using expression

Question

Recently I have need to apply a class base on the json data from server side. But seems like it doesn't work out for me. Any idea about this? Thanks code:

<tr>
    <td><span class=" text4 green col-md-12 col-lg-12" ng-class="numclass('inProgressCounter')">{{inProgressCounter}}</span></td>
    <td><span class=" text4 green col-md-12 col-lg-12" ng-class="numclass('inProgressCounter')">-Accounting Review</span></td>
</tr>

JS:

 $scope.numclass = function(num){
    var classname='';
    if(num > 999)
    {
      classname = 'smalltext';
    }

    if(num <= 999){
        classname = 'defaulttext';
    }

    return classname;
};

Paulo Scardine · Accepted Answer · 2015-02-17 18:36:41Z

1

Why a function? I believe you can achieve the same thing using this:

<tag ng-class="{smalltext: inProgressCounter &gt; 999, defaulttext: inProgressCounter &lt;= 999}"></tag>

If you want to use a function, you don't need ng-class:

<tag class="foo bar {{numclass(inProgressCounter)}}"></tag>

edited Feb 17, 2015 at 18:36

answered Feb 17, 2015 at 17:46

Paulo Scardine

78.3k12 gold badges134 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mcranston18 Over a year ago

isn't this sort of logic better suited to be in the controller?

floor Over a year ago

although that does work isn't that a bit sloppy looking?

Paulo Scardine Over a year ago

@mcranston18: it is a matter of taste, but if you want to do it on the controller, use the regular class attribute with an angular expression inside instead of the ng-class directive. @floor: I like to place presentation logic in the presentation layer and only business logic on the controller, but as I said it is a matter of taste.

mcranston18 Over a year ago

why is it more suitable to use regular class in this instance? Isn't ng-class suitable to any dynamic class?

Paulo Scardine Over a year ago

@mcranston18 ng-class works if the expression evaluates to a string containing space-delimited class names, an array of strings, or an object. I didn't say it is more suitable, I just said you don't really need ng-class for that simple use case.

|

Collectives™ on Stack Overflow

AngularJs ng-class using expression

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related