Angular 容器内 JS 重复数量

Question

示例：http://jsfiddle.net/njt1982/1m14yrrs/

我有一个这样的示例数据集：

[
    { quantity: 2, type: { name: 'alpha', id: 1 }},
    { quantity: 4, type: { name: 'beta',  id: 2 }},
    { quantity: 1, type: { name: 'delta', id: 3 }}
]

我希望输出为：

<div class="items">
    <i class="item-type-1" />
    <i class="item-type-1" />
    <i class="item-type-2" />
    <i class="item-type-2" />
    <i class="item-type-2" />
    <i class="item-type-2" />
    <i class="item-type-3" />
</div>

但是我无法弄清楚如何让 Angular 对我的项目进行循环，然后 "loop" 在数量范围内进行循环，而不需要大量包装。在我的 fiddle 中，每个 "type" 都有一个包装器，这是我不想要的。我可以在不创建项目的情况下迭代顶级数组吗？

从我在这里搜索的内容来看，我可能需要 ng-repeat-start ?

更新

我已经接受了下面 Sulthan 的回答，并生成了这个更新的 JS Fiddle：http://jsfiddle.net/njt1982/b68a8577/2/

（使用范围级函数生成项目集合，供 Angular 重复）。

Answer 1

ng-repeat-start 在这里根本帮不了你。你真正想要的是一个嵌套的 ng-repeat.

您想首先迭代 items，然后对每个项目迭代 quantity 次。但是，由于 ng-repeat 仅适用于标签，您将无法使用两个嵌套的 ng-repeats 来生成平面结构。您将不得不添加一些嵌套（当然可以通过 css 隐藏）。还要记住，要使用 ng-repeat 迭代 n 次，您必须实际生成数组 [0, 1, 2, 3 .... n - 1].

如果您不想要额外的标签，您唯一的（或者我相信这是唯一的）解决方案是预处理。只需向您的控制器添加一个函数，它将您的项目数组作为参数，迭代它并乘以项目。那么您的 html 将只是

<i ng-repeat="item in getModifiedItems(items)" ng-class="...">

一个简单的实现是：

$scope.getModifiedItems = function (items) {
    var newItems = [];

    var i, j;
    var item;

    for (i = 0; i < items.length; i++) {
        item = items[i];

        for (j = 0; j < item.quantity; j++) {
            newItems.push(angular.copy(item));
        }
    }        

    return newItems;
}

Angular 容器内 JS 重复数量

Angular JS repeat quantity inside containers

angularjs

angularjs-ng-repeat

更新