Javascript 如何在网页中设置带有class属性的正确解析if语句和带有Angularjs的ng class？

我一直在努力学习angularjs（用于nodered）的语法。我想根据列表中的workorder.state在每一行上设置不同的引导类。 如果“if语句为true”，则应使用success类。但是如果不正确，则始终使用默认的“信息”。即使{workorder.state}的输出为“就绪”。有什么建议吗

<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>

{{workorder.state}

我在浏览器控制台中发现以下错误

app.min.js:142错误：[$parse:syntax] $parse/syntax？p0=%7B&p1=无效的%20key&p2… ve宽度%20%3A%20列表组项目%20列表组项目信息%20响应宽度 在 投掷者（） 在t.object（）处 在t.primary（） 在t.一元（） 在t.乘法（） t.加性（） 在t.relational（） 在t.equality（） 在t.logicalAND（）

---

尝试将您的ng类更改为此（

ng类

用于代替

类

，而不是您使用的附加类）：

---

您不必使用插值

{{}

并将公共类（无论是否检查）过滤到

类

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>


{{workorder.state}

更多参考信息：




{{workorder.state}

<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>

<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>