1

I have struggling with the syntax with angularjs (used in nodered). I want to set diffrent bootstrap classes on each row depending on the workorder.state in a list. if the "if statement are true" it should use success class. But the if are never true it always use default "info". Even if the output of {{workorder.state}} are "Ready". Any suggestions?

<div class="list-group" ng-repeat="workorder in workorders">
    <button type="button" class="ng-class:{{workorder.state}} === 'Ready' ? list-group-item list-group-item-success responsive-width : list-group-item list-group-item-info responsive-width;">
          <span class="brnodisplay">{{workorder.state}}</span>
    </button>
</div>

I get below error in browser console.

app.min.js:142 Error: [$parse:syntax] http://errors.angularjs.org/1.5.10/$parse/syntax?p0=%7B&p1=invalid%20key&p2… ve-width%20%3A%20list-group-item%20list-group-item-info%20responsive-width at http://127.0.0.1:1880/ui/js/app.min.js:29:426 at throwError (http://127.0.0.1:1880/ui/js/app.min.js:256:200) at t.object (http://127.0.0.1:1880/ui/js/app.min.js:256:33) at t.primary (http://127.0.0.1:1880/ui/js/app.min.js:252:151) at t.unary (http://127.0.0.1:1880/ui/js/app.min.js:251:503) at t.multiplicative (http://127.0.0.1:1880/ui/js/app.min.js:251:249) at t.additive (http://127.0.0.1:1880/ui/js/app.min.js:251:76) at t.relational (http://127.0.0.1:1880/ui/js/app.min.js:250:416) at t.equality (http://127.0.0.1:1880/ui/js/app.min.js:250:241) at t.logicalAND (http://127.0.0.1:1880/ui/js/app.min.js:250:94)

Vivz
  • 6,625
  • 2
  • 17
  • 33
joakimja
  • 2,707
  • 2
  • 17
  • 25

3 Answers3

1

Try changing your ng-class to this (ng-class is used in lieu of class, not in addition to as you have used):

ng-class="workorder.state === 'Ready' ? 'list-group-item list-group-item-success responsive-width' : 'list-group-item list-group-item-info responsive-width'"

https://docs.angularjs.org/api/ng/directive/ngClass

Brian
  • 4,921
  • 3
  • 20
  • 29
1

You don't have to use interpolation {{}} and filter common classes(which should be there irrespective of the check) to class.

HTML:

<div class="list-group" ng-repeat="workorder in workorders">
    <button type="button" class="list-group-item  responsive-width" ng-class="{'list-group-item-success': workorder.state === 'Ready' ,'list-group-item-info':'workorder.state !== 'Ready' }">
          <span class="brnodisplay">{{workorder.state}}</span>
    </button>
</div>

For more reference:

  1. Adding multiple class using ng-class
  2. https://docs.angularjs.org/api/ng/directive/ngClass
Vivz
  • 6,625
  • 2
  • 17
  • 33
1
<div class="list-group" ng-repeat="workorder in workorders">
    <button type="button" class="list-group-item  responsive-width" ng-class="{'list-group-item-success': workorder.state === 'Ready' , 'list-group-item-info': workorder.state !== 'Ready' }">
        <span class="brnodisplay">{{workorder.state}}</span>
    </button>
</div>
Alexander Bolzhatov
  • 278
  • 3
  • 12