0

我是 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返回字符串'collapsed'、'expanded'和'empty'的属性。所以我可以像这样编写ngClass

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

无论如何，这也许是一种更清洁的方法。有什么想法/建议吗？如果相关，该应用程序正在使用 AngularJS v1.0.2。

4

1 回答 1

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()"
于 2013-10-15T10:38:37.813 回答