Question

在Angular中：

我有以下JSON对象：

$scope.catItems = [
                {cat: 'A', desc: 'lorem ipsum', tags: '', name: 'abc', link: 'www.google.com'},
                {cat: 'B', desc: 'I am here too', tags: '', name: 'def', link: 'www.google.com'},
                {cat: 'C', desc: 'So am I', tags: '', name: 'ghi', link: 'www.google.com'},
                {cat: 'D', desc: 'Where is the sky', tags: '', name: 'jkl', link: 'www.google.com'},
                {cat: 'A', desc: 'I really don't know', tags: '', name: 'mno', link: 'www.google.com'},
                {cat: 'A', desc: 'So do I', tags: '', name: 'pqr', link: 'www.google.com'},
                {cat: 'C', desc: 'Tell the next person', tags: '', name: 'stu', link: 'www.google.com'},
                {cat: 'B', desc: 'So will I', tags: '', name: 'vwx', link: 'www.google.com'}
            ];

你可以看到同样的猫是如何让猫咪A在物体中重复两次以上，或者某些猫只重复两次甚至更少。

我想看看我们是否可以基于上面的对象中的Cat，将它们解析为如下所示的一个数组，并从生成的列表中删除重复项：

$scopt.cats = [];
for (items in $scope.catItems){
  if ($scope.cats.indexOf(item.cat) < 0){
    $scope.cats.push(item.cat);
  }
}

并在下面显示：

<ul data-ng-repeat="items in cats">
    <li>
       <p class="search-title">{{items}}</p>
    </li>
</ul>

另外，如果可能的话，在他们下面显示每个人的属性。

Answer 1

尝试这样的方法来重建数据：

var list = {};
for (item in catItems){
    if (!list[catItems[item].cat]){
      list[catItems[item].cat] = [];
      list[catItems[item].cat].push(catItems[item]);
    } else{
      list[catItems[item].cat].push(catItems[item]);
    }
}

$scope.cats = list;

这将为您提供一个对象，每个类别都作为键，数据包含在数组中。

<ul data-ng-repeat="(key, value) in cats">
    <li>
       <p class="search-title">{{key}}</p>
       <ul data-ng-repeat="item in value">
           <li>
               <p class="search-title">{{item}}</p>
           </li>
       </ul>
    </li>
</ul>

Answer 2

最可重复使用的解决方案，可能是制作一个新的角度滤镜。（https://docs.angularjs.org/api/ng/filter/filter）

在过滤器中，您可以执行以下操作：

function removeDuplicates(array, uniqProperty) {
    var uniq = [];
    return array.reduce(function(accumulator, item) {
         var prop = item[uniqProperty];
         var isUniqueItem = uniq.indexOf(prop)
         if (isUniqueItem) {
             uniq.push(prop);
             accumulator.push(item);
         }
         return accumulator;
    }, []);
}

完成此操作后，您可以在每个ng-repeat中使用它。

角度：基于不同类别的显示

2 个答案: