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

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

演示是here。

它部分起作用，即第二捆正确匹配条件，但第三捆不匹配。所以，我想念的是什么？任何帮助将不胜感激！

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>

ng-repeat时跳过重复的项目

1 个答案: