在 Angular JS 转发器中迭代一个变量？

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

您将带有 ng-click 的 div 放置在 ng-repeater 包装器中。由于您使用 claim in claims，您可以像以前一样在 claim 上设置变量。

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 将在每个重复的声明中初始化一个 "isOpen" 变量（这实际上应该在 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>

这样就够了。

这里是 Plunker

iterate a variable in an Angular JS repeater?