需要在 objects 内重复这些 objects。我可以将 $index 与 ng-repeat 一起使用吗？

Question

我有以下 javascript object 称为 "tabs":

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

我想要的页面输出：

 section0.title
      children0.title
      children1.title

最终成为

 Analytical Balances
      ML
      XS

我已经将选项卡名称（tab0.title、tab1.title）作为选项卡式导航重复，我想知道如何重复部分名称（例如 section0.title）和 sub-section 名称（例如 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>

这不是使用我向您介绍的 "tabs" object，而是 "tabArray"，它只是一个按顺序排列 top-level 选项卡名称的数组. toggleSelect 使用 $index 允许我根据选择的选项卡更改显示的内容，并选择哪个选项卡处于活动状态 class.

现在回到为什么我认为我在发布这个问题时需要 $index。我的 "tabs" object 中的选项卡名为 "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

并更改 'section in tabs'

到 tab.sections 中的“部分

然后

section.title

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

需要在 objects 内重复这些 objects。我可以将 $index 与 ng-repeat 一起使用吗？

Need to repeat these objects within objects. Can I use $index with ng-repeat to make this happen?

javascript

angularjs

ng-repeat