Angular：根据不同类别显示答案

【问题标题】：Angular: Display based on different categoriesAngular：根据不同类别显示
【发布时间】：2018-10-08 13:18:30
【问题描述】：

在 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'}
            ];

您可以看到同一只猫是如何在对象中重复两次以上的，或者说某些猫只重复两次甚至更少。

我想看看我们是否可以基于上述对象中的 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>

此外，如果可能，在其下方显示每个人的属性。

【问题讨论】：

你看这个帖子了吗：stackoverflow.com/questions/17793751/…
@Stradosphere，想法更接近我正在寻找的东西，但我需要将猫存储在一个数组中，然后一旦猫被存储。它们各自的属性需要在它们下面显示。就像，Cat - A 重复三次，所以它的输出是 (Cat - A ---- name : abc name : mno name: pqr)

标签： javascript html arrays angularjs sorting

【解决方案1】：

最可重用的解决方案，可能是制作一个新的角度滤镜。 (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】：

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

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>

【讨论】：