嵌套 NG 重复答案

【问题标题】：Nested NG Repeating嵌套 NG 重复
【发布时间】：2015-05-28 12:39:46
【问题描述】：

我有一个 JSON 对象（见下文），它代表类别，类别内部有产品。

阅读了关于 ng-repeat 的内容后，似乎我需要创建一个 ng-repeat 来呈现每个类别的 HTML 块，而且对于该类别中的每个产品，都有一个类似的重复的 html 模板。我猜这是某种嵌套过程，有人可以帮忙吗？

正如我使用 bootstrap 手风琴一样，您可以看到我的 html 每次都依赖一个唯一的名称，例如 collapse-one、collapse-two。可以包含数字的迭代可以渲染collapse-1，collapse-2等

提前致谢

{
"Data": [
    {
        "Category": {
            "Key": 1,
            "Value": "Category Title"
        },
        "ProfileOptions": [
            {
                "Key": 2129,
                "Value": "Product 1",
                "EditableByUser": true
            },
            {
                "Key": 3363,
                "Value": "Product 2",
                "EditableByUser": true
            },
            {
                "Key": 2164,
                "Value": "Product 3",
                "EditableByUser": true
            }
        ]
    },
    {
        "Category": {
            "Key": 2,
            "Value": "Category Title"
        },
        "ProfileOptions": [
            {
                "Key": 2129,
                "Value": "Product 1",
                "EditableByUser": true
            },
            {
                "Key": 3363,
                "Value": "Product 2",
                "EditableByUser": true
            },
            {
                "Key": 2164,
                "Value": "Product 3",
                "EditableByUser": true
            }
        ]
    }
],
"Success": true
}

HTML如下

<div class="panel-group accordion" id="products-accordion">

  <!-- CATEGORY REPEATER -->
  <div class="panel panel-default" ng-repeat="category in businessData">
    <div class="panel-heading" data-toggle="collapse" data-parent="#products-accordion" href="#collapseOne">
      <h4 class="panel-title">
        <span class="blcMarker"></span>{{category.Value}}
      </h4>
    </div>

    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">

        <!-- PRODUCTS REPEATER -->
        <div class="checkbox col-xs-6 col-sm-4" ng-repeat="product in businessData.categories">
          <label><input type="checkbox" id="chk-1" value="{{key}}">{{value}}</label>
        </div>

      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： angularjs twitter-bootstrap angularjs-ng-repeat ng-repeat

【解决方案1】：

您可以只使用嵌套的ng-repeat，其中嵌套的使用第一个重复元素的变量：

<div ng-repeat="cat in categories">
    {{ cat.name }}
    <ul>
        <!-- You can use 'cat' here -->
        <li ng-repeat="product in cat.products">
            {{ product.name }}
        </li>
    </ul>
</div

所以你可以改变你的

ng-repeat="product in businessData.categories"

到

ng-repeat="product in category"

其中category与第一个ng-repeat中的变量相同（category in businessData）

【讨论】：

嗨，我在执行您的建议时遇到了一些问题。我正在使用 $scope.businessData = data 并通过 ng-repeat="cat in businessData" 在父 div 结构（类别）上取得了轻微的成功，然后将标题写为 {{cat.Category.Value}} 但我有现在产品的问题 - 查看 JSON 模型，产品不是类别的子类别，那么我该如何定位它们？它们在节点中：ProfileOptions
我想我已经解决了 - 我使用过的子项目：cat.ProfileOptions 中的产品然后引用 {{product.Value}}。谢谢

【解决方案2】：

我在上一个项目中实现了这一点。我就是这样完成的。

<ul>
    <li ng-repeat="researchArea in researchAreas track by $index">
        <span class="title">{{ researchArea.name }}</span>
        <ul>
            <li ng-repeat="category in researchArea.categories track by $index">
                <span class="title">{{ category.name }}</span>
            </li>
        </ul>
    </li>
</ul>

【讨论】：