如何在网页中设置带有类属性的右解析if语句和带有Angularjs的ng-class?

Question

我一直在努力使用angularjs(在nodered中使用(的语法。我想根据列表中的 workorder.state 在每一行上设置不同的引导类。 如果"if 语句为真"，则应使用成功类。但是如果永远不会为真，它总是使用默认的"信息"。即使 {{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>

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

app.min.js：142 错误： [$parse：语法] 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%20response-width 在 http://127.0.0.1:1880/ui/js/app.min.js:29:426 在投掷错误 (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( 在T.小学(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( 在 t.乘法 (http://127.0.0.1:1880/ui/js/app.min.js:251:249( 在T.Addive(http://127.0.0.1:1880/ui/js/app.min.js:251:76( 在T.Relational (http://127.0.0.1:1880/ui/js/app.min.js:250:416( 在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(

Answer 1

您不必使用插值{{}}并过滤公共类(无论检查如何都应该存在(来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>

更多参考：

1. 使用 ng 类添加多个类
2. https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

尝试将你的ng类改为这个(ng-class用于代替class，而不是作为你使用的补充(：

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

Answer 3

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