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

Question

有一个嵌套数组，它由捆绑包组成，这些捆绑包又有项目。因此，我想在迭代时根据以前的捆绑包项目跳过下一个捆绑包的相同项目。以下是数据模型和代码片段：

虚拟机数据

[
  {
    id: '01',
    name: 'Dummy1',
    items: [{
      id: 'itemOne',
      name: 'ItemOne',
      desc: 'ItemOne description'
    }]
  },
  {
    id: '02',
    name: 'Dummy2',
    items: [{
      id: 'itemOne',
      name: 'ItemOne',
      desc: 'ItemOne description'
    },
    {
      id: 'otherItem',
      name: 'OtherItem',
      desc: 'OtherItem description'
    }]
  },
  ...
]

目录：

<div ng-repeat="bundle in vm.data track by $index">
  ...
  <ul>
    <li ng-repeat="item in bundle.items" ng-if="vm.check(item, $parent.$index)">
      <span ng-bind="item.name"></span>
      ...
    </li>
  </ul>
</div>

虚拟机检查：

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;
  }
};

演示在这里。

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

Answer 1

我会将复杂的逻辑排除在您的模板之外。相反，您应该在尝试使用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>