Question

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

<!-- .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'）instaed of unique tab identifiers所以！我尝试使用openTab（'tab {{i}}'）动态创建它们，就像我对计数器一样，但它不起作用。没有任何反应，关于如何动态更改选项卡名称的任何想法？谢谢！

Answer 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的值。

Answer 2

通过利用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>

Angular JS从静态到ng-repeat

2 个答案: