Question

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

阅读了bout 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>

Answer 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）

中的变量相同

Answer 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>

嵌套NG重复

2 个答案: