如何在网页中使用 class 属性和 ng-class 和 Angularjs 设置正确解析的 if 语句？

Question

我一直在努力使用 angularjs 的语法（在 nodered 中使用）。我想根据列表中的 workorder.state 在每一行上设置不同的 bootstrap classes。如果 "if statement are true" 它应该使用成功 class。但是 if 永远不会为真，它总是使用默认值 "info"。即使{{workorder.state}}的输出是"Ready"。有什么建议吗？

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

Answer 1

尝试将您的 ng-class 更改为此（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 2

您不必使用插值 {{}} 和过滤器 common 类（无论检查如何，它都应该存在）到 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>

更多参考：

Adding multiple class using ng-class
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>

如何在网页中使用 class 属性和 ng-class 和 Angularjs 设置正确解析的 if 语句？

How to set a right parsed if statement with class attribute and ng-class with Angularjs in a webpage?

javascript

angularjs

node-red