如何設置一個正確的分析，如果語句與類屬性和ng-class Angularjs在網頁中？

我一直在用angularjs（在nodered中使用）的語法掙扎。我想根據列表中的workorder.state在每行上設置不同的引導類。如果「if語句是真的」，它應該使用成功類。但是，如果從不是真的，它總是使用默認的「信息」。即使{{workorder.state}}的輸出爲「就緒」。有什麼建議麼？如何設置一個正確的分析，如果語句與類屬性和ng-class Angularjs在網頁中？

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

來源

2017-08-08 joakimja

你不必須使用插值{{}}並過濾公共類（應該在那裏不考慮檢查）到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>

對於多個參考：

來源

2017-08-08 14:18:39 Vivz

試着改變你的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

來源

2017-08-08 14:16:59 Brian

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

來源

2017-08-08 14:35:36

如何設置一個正確的分析，如果語句與類屬性和ng-class Angularjs在網頁中？

回答

相關問題