angularjs ng-class with different conditions

Question

i have a view which shows data and i want to add another class on the list items in my view.

<input type="text" class="filter" placeholder="search..." ng-model="search">
<ul>
    <li ng-repeat="item in items | filter:search | orderBy:'date'">
        {{ date }} {{ item.heading }}<button ng-click="deleteItem(item.ID)"><i class='icon-trash'></i></button>
    </li>
</ul>

i have a variables called item.date and i want to compare it to another variables today. Here is the logic:

if (item.date - today <= 0) 
    apply class1 
if else (item.date - today > 0 && item.date - today <= 3)
    apply class2
and so on

how can i achieve this with angular? can i put this logic directly into my view or do i need to define it in my controller?

thanks in advance

AlwaysALearner · Accepted Answer · 2013-08-13 12:12:03Z

12

Since you have a bit heavy comparisons to make, I would suggest moving it inside a function rather than having it in HTML:

<li ng-class="getClass(item.date)" 
    ng-repeat="item in items | filter:search | orderBy:'date'">

JS:

$scope.getClass = function(date){
    /* comparison logic here*/
    /* returs class name as string */
}

edited Aug 13, 2013 at 12:12

answered Aug 13, 2013 at 11:46

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

2 Comments

Yann Over a year ago

I think you can use ng-class and get rid of the {{}}.

AlwaysALearner Over a year ago

@Yann Yeah no point in using class attr when angular provides ng-class. I have updated my answer. Thanks.

EpokK · Accepted Answer · 2013-08-13 12:58:18Z

5

I think you can use ng-class like this:

HTML

<li ng-class="{'class1': item.date - today <= 0, 'class2': (item.date - today > 0 && item.date - today <= 3)}"></li>

OR moving it inside a function like this:

HTML

<li ng-class="getClass(item.date)"></li>

JS

$scope.getClass = function(date){
    return {'class1': item.date - today <= 0, 'class2': (item.date - today > 0 && item.date - today <= 3)};
}

answered Aug 13, 2013 at 12:58

EpokK

38.1k9 gold badges64 silver badges69 bronze badges

Collectives™ on Stack Overflow

angularjs ng-class with different conditions

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related