需要在对象内重复这些对象。我可以使用 $index 和 ng-repeat 来实现这一点吗？

Question

我有以下名为“标签”的 javascript 对象：

http://i.imgur.com/hKTj9o9.png

我想要的页面输出：

 section0.title
      children0.title
      children1.title

最终变成了

 Analytical Balances
      ML
      XS

我已经将选项卡名称（tab0.title、tab1.title）重复为选项卡式导航，我想知道如何重复部分名称（例如 section0.title）和子部分名称（例如 children0.title） .

这就是我认为可能实现的结果：

            <div ng-repeat="tab in tabs" track by $index>
              <a>{{ tab[$index].title }}</a>
                    <ul ng-repeat="section in tabs" track by $index>
                      <li>{{ section[$index].title }}</li>
                        <ul ng-repeat="child in children" track by $index>
                          <li>{{ child[$index].title }}</li>
                        </ul>
                    </ul>
            </div>

我知道这也会重复选项卡标题，但我认为如果我包含顶级内容会更容易理解。然后我可以修改它，根据索引每页只显示一个标签。

是否可以像这样使用 $index 来引用 javascript 变量？我现在意识到这可能不是一回事。

非常感谢您的宝贵时间。

编辑：非常感谢您的输入，您几乎立即解决了我的问题。我现在明白为什么我会使用 $index 并且可以使用更多帮助。我目前在显示我的标签名称时有此代码：

<nav>
        <ul>   
               <li ng-class="getClass($index)" ng-repeat="tab in tabArray">
                    <a ng-click="toggleSelect($index)" ng-class="getLinkClass($index)">{{tab}}</a>
               </li>
        </ul>
</nav>

这不是使用我向您介绍的那个“选项卡”对象，而是使用“tabArray”，它只是一个按顺序具有顶级选项卡名称的数组。 toggleSelect 使用 $index 允许我根据选择的选项卡更改显示的内容，并选择哪个选项卡获取活动类。

现在回到为什么我在发布这个问题时认为我需要 $index。我的“选项卡”对象中的选项卡被命名为“tab0”、“tab1”等。当 $index 为 0 时，我可以使用 $index 仅重复来自 tab0 的元素吗？这就是为什么我认为我可以使用像

这样的参考

 {{tabs["tab"+$index].title}}

什么的。甚至将我的标签命名为“0”、“1”等并参考

 {{tabs[$index].title}} 

在我的 HTML 中。

非常感谢，如果我不清楚，请告诉我。

也供参考，我的简单toggleSelect方法：

 $scope.toggleSelect = function(ind){
            $scope.selectedIndex = ind;


            }

Answer 1

您需要根据您的迭代项目进行修改，因为每个项目都与您已经在迭代的项目相关。

总共只有 3 个 for-each 循环：

<div ng-repeat="tab in tabs">
      <a>{{ tab.title }}</a>
      <ul ng-repeat="section in tab.sections">
         <li>{{ section.title }}</li>
         <ul ng-repeat="child in section.children">
            <li>{{ child.title }}</li>
         </ul>
      </ul>
 </div>

编辑：要回答您的编辑，您可以将上述 HTML 中的第一行更改为：

<div ng-repeat="tab in tabs" ng-if="tabIsActive($index)">

在你的控制器中有：

$scope.tabIsActive = function (index) {
     //according to your edit, $scope.selectedIndex should hold the active tab index
     return $scope.selectedIndex == index;
}

Answer 2

您实际上不需要使用 [$index] 字段，您应该能够做到这一点：

tab.title

并更改“选项卡中的部分”

to 'tab.sections 中的部分'

然后做

section.title

ng-repeat 已经为您提供了 tabs 数组中的单个元素，该变量称为“tab”。同样适用于部分。