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