0

所以我有下面的代码显示一个标签标题，当你点击它时，一个内容区域会展开。

<!-- .accordion__tab -->
<div class="accordion__tab">
<div class="accordion__tab-title" ng-click="openTab('tab one')"><h3 class ="grey-text">Box 1</h3></div>
<div class="accordion__tab-content" ng-show="isOpenTab('tab one')">Tab content goes here!</div>
</div>
<!-- .accordion__tab -->
<div class="accordion__tab">
<div class="accordion__tab-title" ng-click="openTab('tab two')"><h3 class ="grey-text">Box 2</h3></div>
<div class="accordion__tab-content" ng-show="isOpenTab('tab two')">Tab content goes here!</div>
</div>

这工作得很好，所以当我仍在尝试学习角度时，我试图把它放在一个循环中，这样我就可以拥有其中的 5 个，所以我最初把这段代码放进去。

<div ng-repeat="i in [1, 2, 3, 4, 5]">
    <div class="accordion__tab">
        <div class="accordion__tab-title" ng-click="openTab('tab')"><h3 class ="grey-text">Box {{i}}</h3></div>
        <div class="accordion__tab-content padding" ng-show="isOpenTab('tab')">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</div>

这会循环并生成 5 个对象，但问题是如果您单击其中一个对象，它们都会展开（这是有道理的，因为它们都具有唯一选项卡标识符的 openTab('tab')。所以！我尝试使用 openTab('tab {{i}}') 动态创建它们，就像我对计数器所做的那样，但它不起作用。没有任何反应，关于如何动态更改选项卡名称的任何想法？谢谢！

4

2 回答 2

1

这是因为，您的所有选项卡在 openTab 方法中都具有相同的参数/标识符。

将您的代码更改为

<div ng-repeat="i in [1, 2, 3, 4, 5]">
    <div class="accordion__tab">
        <div class="accordion__tab-title" ng-click="openTab('tab_' + $index)"><h3 class ="grey-text">Box {{i}}</h3></div>
        <div class="accordion__tab-content padding" ng-show="isOpenTab('tab_' + $index)">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</div>

由于 ng-click 是一种 Angular 方法，因此您不需要{{}}来解析 i 或 $index 的值。

于 2014-12-12T06:37:09.447 回答
1

ng-repeat通过利用为每次迭代创建子范围的事实，您也可以比您的示例中简单得多。这是一个简化的示例：

<div ng-repeat="i in [1,2,3,4]" ng-init="open = false">
  <button ng-click="open = !open">Header {{i}}</button>
  <div ng-show="open">Content {{i}}</div>
</div>
于 2014-12-12T06:39:45.683 回答