如何編寫ng-class對象來比較複雜的條件？

Question

有一種形式可以讓用戶以4個步驟輸入一些字段。每一步都可能有幾個字段。如果當前步驟中顯示的所有字段都是有效的，則此步驟將顯示綠色，否則將顯示爲紅色。

對於第3步，最多同時顯示4個字段，比如說A，B，C，D。假設每個有效值爲a，b，c，d。由於某些字段將根據之前的選擇顯示/隱藏。最終邏輯條件應爲abcd||abc||ab||a||bcd||bc||d（abcd表示a&&b&&d&&c）。我使用的是NG-類對象更改CSS顏色，片段是象下面這樣：

ng-class="{ 
"green": abcd||abc||ab||a||bcd||bc||d, 
"red": !(abcd||abc||ab||a||bcd||bc||d) 
}" 

正如你所看到的，這實在是醜陋的解決方案...有沒有解決這個優雅的方式？

Answer 1

你可以通過納克級的功能

ng-class="{'green': isValid(), 'red': !isValid()}" 

，並在控制器

$scope.isValid=function(){ 
    return abcd||abc||ab||a||bcd||bc||d; 
} 

Answer 2

創建funcion如果重構是你需要什麼，
你可以提取「比較」部分，並把它放在一個函數中，這個函數將在ng級中被調用，因此：

查看：

ng-class="{ 
"green": getClass, 
"red": !(getClass) 
}" 

控制器：

$scope.isValidClass = function() { 
return (abcd||abc||ab||a||bcd||bc||d); 
}; 

注意，你會需要添加 「$範圍。」作爲abcd，ab等的前綴。