javascript - Angular 中的嵌套 ng-repeats

Question

我正在尝试使用 angular.js 处理一些嵌套重复，但似乎无法让它工作。我已经像这样构造了我的 json -

[
 {
"levels": [
  {
    "targets": [
      "one", 
      "two", 
      "three", 
      "four"
    ], 
    "response": "response", 
    "instructions": "insturctions"
  }
  ], 
"name": "Name One", 
"form": [
  {
    "pfade": "fade", 
    "ptype": " type", 
    "psection": "section", 
    "lbehavior": "l behave", 
    "options": "options", 
    "tbehaviour": "t behave"
  }
]
}, 
{
"levels": [
  {
    "targets": [
      "one", 
      "two", 
      "three", 
      "four"
    ], 
    "response": "response", 
    "instructions": "insturctions"
  }
], 
"name": "Name Two", 
"form": [
  {
    "pfade": "fade", 
    "ptype": " type", 
    "psection": "section", 
    "lbehavior": "l behave", 
    "options": "options", 
    "tbehaviour": "t behave"
  }
]
}, 
{
"levels": [
  {
    "targets": [
      "one", 
      "two", 
      "three", 
      "four"
    ], 
    "response": "response", 
    "instructions": "insturctions"
  }
], 
"name": "Name Three", 
"form": [
  {
    "pfade": "fade", 
    "ptype": " type", 
    "psection": "section", 
    "lbehavior": "l behave", 
    "options": "options", 
    "tbehaviour": "t behave"
  }
]
}
]

如果您愿意，也可以链接到这里:http://www.json-generator.com/api/json/get/bOyGmHavfS?indent=2

我试图重复循环子数组，但我似乎无法正确(引用？)它们。我发现了一些其他 ng-repeats 嵌套的例子，他们这样做似乎没有问题，所以这是我的尝试

<!--  parent level repeats -->
                        <tr class="saLevel" ng-repeat="parent in listTable track by $index">

                            <td></td><td><input type="checkbox" name="instructionLevelChecker" ng-model="levelRadio" ></td><td>{{parent.name}}</td><td></td><td></td><td></td>


                                <!--  sub level repeats -->

                                <span ng-repeat="sub in parent.levels">{{sub}}sub</span>

                                <!--  end sub level repeat -->
                        </tr>
                    <!--  end parent levels -->

我知道跨度很糟糕 - 我只是想在造型之前让它发挥作用。它似乎不喜欢这个论点，我无法弄清楚其中的原因。

另外-在另一部分中，我试图从子数组(形式一)中提取信息，这似乎也无法开始工作。我假设它有同样的问题。所以我正在做

    <div class="subformWrappers" ng-repeat="level in levels track by $index">

然后在其中，我尝试通过执行以下操作将数据提取到“表单”中:

    <textarea rows="4" ng-model="level.form.options"></textarea>

同样没有成功，我假设这两个问题都与同一件事有关。任何输入都会非常有帮助!感谢您的阅读。

Answer 1

这是一个使用嵌套重复的简单示例。希望这能让你继续前进。

Json模型

 $rootScope.list = [{
        "levels" : [{
                "targets" : [
                    "one",
                    "two",
                    "three",
                    "four"
                ],
                "response" : "response",
                "instructions" : "insturctions"
            }
        ],
        "name" : "Name One",
        "form" : [{
                "pfade" : "fade",
                "ptype" : " type",
                "psection" : "section",
                "lbehavior" : "l behave",
                "options" : "options",
                "tbehaviour" : "t behave"
            }
        ]
    },
    .
    .
    .
    ];

一些示例嵌套重复，您可以更改以满足您的需要。

  <div data-ng-repeat="item in list">
    <div>{{item.name}} <input type="text" ng-model="item.form[0].options"/></div>
    <ul data-ng-repeat="level in item.levels">
      <li data-ng-repeat="target in level.targets">{{target}}</li>
    </ul>
    <hr/>
  </div>

笨蛋http://plnkr.co/edit/E2frec2QHBdOMksaZQj2