AngularJS - Using Multiple Coniditons on ng-class

Question

I have a using an ng-repeat. The also has a ng-class true/false condition which is working. Am i able to add another condition to my true/false statement?

<tr ng-repeat="data in myData" ng-class="{true: 'green', false: 'red'}[data.IsPositive]">
    <td>
        {{data.Name}}
    </td>
    <td>
        {{data.CompanyName}}
    </td>
    <td>
        <span ng-show="data.Date | lessThanOneYear">Less than one year</span>
        <span ng-show="data.Date | lessThanOneYear">Greater than one year</span>
    </td>
</tr>

Essentially, i want to perform a check on if:

ng-class="[data.IsPositive] and [data.Date | lessThanOneYear]

So, if both of the above are true, then apply CSS class green... If false, apply red.

Solution:

I've had to use a mixture of the 2 suggestions provided. Essentially the condition with the filter needs to be wrapped in (), so:

ng-class="[data.IsPositive && (data.Date | lessThanOneYear)]

Duplicate? http://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class — Mario Levrero, Oct 24 '14 at 08:35
@MarioLevrero I don't think so. He asks about a more complex boolean expression. He's not asking about using more classes in a ng-class expression. — BiAiB, Oct 24 '14 at 08:38

score 1 · Answer 1 · answered Oct 24 '14 at 08:35

1

yes, you can:

{true: 'green', false: 'red'}[data.IsPositive && secondCondition && x>3 && whatever]

answered Oct 24 '14 at 08:35

BiAiB

12,932
10
43
63

added solution above. – Oam Psy Oct 24 '14 at 08:52

score 1 · Accepted Answer · answered Oct 24 '14 at 08:39

1

By doing this, you need to understand that the expression between [] must evaluate to one of the indexes you specified in the associative array {true: 'green', false: 'red'}.

Then any expression that evaluate to true or false can be used, any boolean expression in this case.

[data.IsPositive and data.Date | lessThanOneYear]

answered Oct 24 '14 at 08:39

yunandtidus

3,847
3
29
42

added solution above. – Oam Psy Oct 24 '14 at 08:51
1

It should be : `{true: 'green', false: 'red'}[data.IsPositive and data.Date | lessThanOneYear]` – yunandtidus Oct 24 '14 at 08:54

AngularJS - Using Multiple Coniditons on ng-class

2 Answers2