AngularJS ngClass表達式可以嵌套嗎？

Question

我是AngularJS的新手，並且在我們繼承的應用程序（最初由第三方爲我們開發）上分配了維護任務。

表格中標題行的左側是一個小按鈕，它顯示加號（+）或減號（ - ）符號，以指示單擊時是展開還是摺疊該部分。它使用ngClass如下所示。

ng-class="{false:'icon-plus',true:'icon-minus'}[day.expanded]" 

當節中沒有數據並因此無法展開時，我必須刪除按鈕。已經有一個這樣的類（。再加上佔位符），我想知道如果ngClass使用表達式可以嵌套，允許這樣的事情

ng-class="{false:'plus-placeholder',true:{false:'icon-plus',true:'icon-minus'}[day.expanded]}[day.hasTrips]" 

這將讓我一個hasTrips財產day增加完成任務。

如果這是不可能的，我想我需要添加一個類似expandoState的屬性，它返回字符串'collapsed'，'expanded'和'empty'。這樣我就可以編寫代碼ngClass這樣

ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[day.expandoState]" 

也許這是一個更清潔的方式做到這一點在任何情況下。任何想法/建議？如果相關，該應用程序使用AngularJS v1.0.2。

Answer 1

你肯定是可以做你提到的兩個選項之一。在可讀代碼方面，第二個優於第一個。

您提到的expandoState屬性應該可能是放置在範圍上的屬性或方法。您的屬性然後會讀取類似於

ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[expandoState()]" 

要將此方法放在您需要查找相關控制器的範圍內。這可能是day分配給範圍的任何地方。只需添加

$scope.expandoState = function() { 
    // Return current state name, based on $scope.day 
}; 

---

或者，你可以寫在控制器上的方法一樣

$scope.buttonClass = function() { 
    // Return button class name, based on $scope.day 
}; 

只返回使用類。這將讓你以更具可讀性的方式編寫第一個選項的邏輯。然後你可以使用

ng-class="buttonClass()"