Пропускать дублирующиеся элементы при ng-repeat

Question

Есть вложенный массив, который состоит из пакетов, и эти пакеты в свою очередь имеют элементы.Итак, я хочу пропустить идентичные элементы следующего пакета на основе предыдущих элементов пакета во время итерации.Ниже приведены модель данных и фрагменты кода:

vm.data

[
  {
    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'
    }]
  },
  ...
]

HTML:

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

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>