CODEWITHSUNDEEP
knockout.js
Wasim
Wasim

Reputation: 1935

using knockout to set css class with an if condition

I want to set a bootstrap css class to a span with if condition (up to the binded value). I have isApproved field in a list, I want to see the field with 'label-success' class when its active and 'label-important' class when its inactive

I added this line, but all the time it's taking the first class

data-bind="
    text: isApproved,
    css: isApproved = 'true' ? 'label label-important' : 'label label-important'"

Is it possible in the html or I should add a computed field on my VM?

Upvotes: 41

Views: 40888

Answers (2)

Armand
Armand

Reputation: 10264

Ternary operator example

<span class="label"
    data-bind="text: isApproved,
               css: isApproved() == true ? 'label-success' : 'label-important'">
</span>

Upvotes: 48

Damien
Damien

Reputation: 8987

If I understood you right, this is the binding you are looking for.

 data-bind="text: isApproved, css: {
    'label' :  true,
    'label-success' :  isApproved(),
    'label-important':  !isApproved()
 }"

I hope it helps.

Upvotes: 69

Related Questions