Question

我是AngularJS的新手，并且已经为我们继承的应用程序（最初由第三方为我们开发）分配了维护任务。

表格标题行的左侧是一个小按钮，显示加号（+）或减号（ - ）符号，表示单击时是否展开或折叠该部分。它使用ngClass执行此操作，如下所示。

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

当部分中没有数据时，我必须删除该按钮，因此无法扩展。已经有一个类（.plus-placeholder），我想知道ngClass使用的表达式是否可以嵌套以允许这样的东西

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

允许我向hasTrips添加day属性来完成任务。

如果这是不可能的，我想我需要添加类似expandoState的属性，它返回字符串'折叠'，'展开'和'空'。所以我可以像这样编码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()"