嵌套 ng-repeat 的角度 JS 问题

Question

我在对象上有一个这样的数组：

$scope.techniques = [
 {
  programmes : 'genie' , 
  documents :[
    {
     menuTag: 'Moments et Centroïdes',
     titre: "Moments et Centroïdes",
     contenu: "moment.html"
    }]
},
{
  programmes : 'test' , 
  documents :[
    {
     menuTag: 'test de test',
     titre: "test",
     contenu: "test.html"
    }]
}
];

我正在尝试使用嵌套的 ng-repeat 构建我的菜单，并且在堆栈溢出上找到的示例不起作用。想不通为什么。

这是我的 html;

<button ng-repeat="tech in techniques" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{tech.programmes}}
    <span class="caret"></span>
</button>
   <ul  class="dropdown-menu">
          <li ng-repeat="doc in tech.documents"><a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
</ul>

我可以看到程序，但我看不到程序内部的文件。我做错了什么？

Answer 1

这是因为您尝试在第一个ng-repeat-scope之外访问"技术"。所以它不是蜂巢。

<div ng-repeat="tech in techniques">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
       {{tech.programmes}}
       <span class="caret"></span>
    </button>
    <ul ng-repeat="doc in tech.documents" class="dropdown-menu">
        <li><a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
    </ul>
</div>

Answer 2

你的两个 ng 重复实际上并没有嵌套。为了嵌套两个 ng 重复，第二个 ng 重复应在第一个 ng 重复的范围内。您不能访问按钮元素之外的"技术"。要使其工作，请将按钮和ul都包装在div中，并在div上定义第一个ng重复而不是按钮。

Answer 3

因为你不在$scope.techniques的迭代之下。

<button ng-repeat="tech in techniques" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{tech.programmes}}
    <span class="caret"></span>
</button>
<!-- tech does not existe anymore-->
<ul ng-repeat="doc in tech.documents" class="dropdown-menu">
    <a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
</ul>