嵌套 BY 重复

Question

我有一个 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>

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>

嵌套 BY 重复

Nested NG Repeating

twitter-bootstrap

angularjs

ng-repeat

angularjs-ng-repeat