Arrays 重复ng时跳过重复的项目

有一个嵌套数组，它由bundle组成，这些bundle依次包含项。因此，在迭代时，我想基于先前的包项目跳过下一个包的相同项目。以下是数据模型和代码片段：

虚拟机数据

Html:

演示是

---

它部分工作，即第二个包正确匹配条件，但第三个包不匹配。那么，我错过了什么？任何帮助都将不胜感激

我会把复杂的逻辑排除在你的模板之外。相反，您应该在尝试使用vm.data之前对其进行转换

var items = {};
vm.bundles = [];
vm.data.forEach(function(data) {

    var bundle = {
        id: data.id,
        name: data.name,
        items: []
    };

    data.items.forEach(function(item) {
        if (!items[item.id]) {
            bundle.items.push(item);
        }
        items[item.id] = true;
    });

    vm.bundles.push(bundle);
});

然后，您的模板可以简单地使用转换后的数据

<div ng-repeat="bundle in vm.bundles track by $index">
    ...
    <ul>
        <li ng-repeat="item in bundle.items">
            <span>{{item.name}}</span>
            ...
        </li>
    </ul>
</div>

---

为什么不在使用ng repeat消费之前简单地构建一个独特项目的数组呢？它将简化您的模板，并在javascript中将复杂的逻辑移到它所属的位置。谢谢您的回答。您提出的解决方案适用于小型数据结构。。。我在问题中提到的vm.data数据结构实际上在每个对象的字段方面相当大，所以我简化了它。。。对于我来说，使用您的解决方案处理如此巨大的数据将是js端的高图表复制数据字段。但是我给你拇指，如果你必须在HTML中这样做，你可以使用一个过滤器而不是一个ng if指令，例如ng repeat=item in bundle.items | filterietems，这可能更适合你的用例。但是您的vm.check方法的性能仍然不是很好，因为它会对每个项目遍历前面的所有项目，您可能希望以某种方式对其进行优化，就像在我的回答中一样。超大数据集对DOM不友好，如果在web页面中呈现大量数据，则在这两种方法中都会遇到性能问题。

vm.check = function(item, bundleIdx) {
  if (bundleIdx > 0) {
    return _.some(vm.data[bundleIdx-1].items, function(obj) {
      return obj.id !== item.id;
    });
  } else {
    // first bundle, so show all items
    return true;
  }
};

var items = {};
vm.bundles = [];
vm.data.forEach(function(data) {

    var bundle = {
        id: data.id,
        name: data.name,
        items: []
    };

    data.items.forEach(function(item) {
        if (!items[item.id]) {
            bundle.items.push(item);
        }
        items[item.id] = true;
    });

    vm.bundles.push(bundle);
});

<div ng-repeat="bundle in vm.bundles track by $index">
    ...
    <ul>
        <li ng-repeat="item in bundle.items">
            <span>{{item.name}}</span>
            ...
        </li>
    </ul>
</div>