AngularJS ngClass condition for attaching dynamic class?

Question

I am trying to attach class dynamically in table's tr in Angular js like bellow :

ng-class="{
     'text-light' : inventory.newValue.disabled,
      'odd' : inventory.rowNumber % 2 === 1,
    {{inventory.first? 'loc-'unit.attachNumber : 'bldg-'inventory.parent.attachNumber }}

    }"

But it's not working,can anyone help me out how can I do this in AngularJs. Also I can't put this in controller.

Does this answer your question? AngularJS ngClass conditional — BadPiggie
– BadPiggie, Commented Nov 7, 2019 at 4:51
No I have gone through this topic doesn't cover dynamic class, means append some dynamic value in class — Sandeep Tiwari
– Sandeep Tiwari, Commented Nov 7, 2019 at 7:22

Guillaume Adam · Accepted Answer · 2019-11-07 07:51:26Z

1

You forgot the string concatenation operator +:

'loc-'+unit.attachNumber
'bldg-'+inventory.parent.attachNumber

Furthermore the last member of you object is not valid. It is missing a key, we can only see a value.

You can try this:

ng-class="{
  'text-light' : inventory.newValue.disabled,
  'odd' : inventory.rowNumber % 2 === 1,
  'attachNumber' : inventory.first? 'loc-'+unit.attachNumber : 'bldg-'+inventory.parent.attachNumber }}
}"

answered Nov 7, 2019 at 7:51

Guillaume Adam

3013 silver badges10 bronze badges

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

Comments

FarukT · Accepted Answer · 2019-11-07 16:54:38Z

0

if you use a lot of condition it is better write a function. in this way you will have a clear code and debuggable code.

like this in your controller

$scope.getRightClass = function(inventory, unit){
    var classes = [];

    if(inventory.newValue.disabled === true){
        classes.push('text-light');
    }

    if(inventory.rowNumber % 2 === 1){
        classes.push('odd');
    }

    if(inventory.first === true){
        classes.push('loc-' + unit.attachNumber)
    }else{
        classes.push('bldg-' + inventory.parent.attachNumber);
    }

    return classes.join(' ');
}

and this in your view

ng-class="getRightClass(inventory, unit)"

answered Nov 7, 2019 at 16:54

FarukT

1,66814 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS ngClass condition for attaching dynamic class?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related