Question

我有一个div隐藏并显示以下div的设置，以创建一个折叠div。我使用变量来显示div，而使用hide / show的div是

<div ng-click="costSummary=!costSummary" ng-class="{open : costSummary}">

单击div切换变量和类（为内部标题设置样式，用于显示三角形）。工作正常。

但是，我需要在ng-repeat中使用这个构造，并且我不确定如何递增该变量，因此每次迭代都有一个唯一的类。如：

<div ng-click="myVar1=!myVar1" ng-class="{open : myVar1}" ng-repeat="claim in claims">

因为这个hide / show要求每个header / div对都有一个唯一的类名。

如何在这种情况下附加索引编号或其他内容？

Answer 1

在ng-repeat中，您可以访问$index - 这将为您提供正在迭代的集合中当前项目的索引。您可以使用它来生成唯一的类ID。

但是，你能不能尝试这个：

<div ng-repeat="claim in claims">
    <div ng-click="claim.myVar1=!claim.myVar1" ng-class="{open : claim.myVar1}">
    </div>
</div>

将ng-click放置在ng-repeater包装器中。由于您使用了claim in claims，因此可以像以前一样设置索赔变量。

Answer 2

如果您需要在重复的div上切换可见性，可以这样做：

<div ng-click="claim.isOpen=!claim.isOpen" ng-class="{open : claim.isOpen}" ng-repeat="claim in claims" ng-init="claim.isOpen = false">

说明：

ng-init将初始化＆＃34; isOpen＆＃34;每个重复声明的变量（这应该在JS端完成）。然后ng-click将切换isOpen变量。然后ng-class将监视该变量的变化。

Answer 3

您无需在ng-repeat中添加多个变量。因为ng-repeat在每次重复中创建子范围。所以变量在子范围中创建，因此ng-repeat

中的其他子范围不可见的一个变量

所以，

<div ng-click="myVar1=!myVar1" ng-class="{open : myVar1}" ng-repeat="claim in claims">
{{  claim }}
</div>

这就足够了。