使用 ng-repeat 后如何显示唯一值？答案

【问题标题】：How to show unique values once using ng-repeat?使用 ng-repeat 后如何显示唯一值？
【发布时间】：2018-01-31 02:40:38
【问题描述】：

使用 AngularJS，我试图只显示数据库中的项目一次，link.DocCategory 和 link.DocSubCategory。使用| unique: 'DocCategory' 并没有给我我预期的结果，因为它实际上显示了一次DocCategory，但也删除了共享相同DocCategory 的其他实例。我想显示一次 DocCategory 及其相关的 DocSubCategory 项目显示一次，并显示其相关的 URL 信息。

这是我的 JSON 结构：

{
  "d": {
    "results": [{
      "URL": {
        "Description": "Capabilities",
        "Url": "https://www.test.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the capabilities that we have to offer.</p></div>",
      "Name": "Capabilities",
      "ID": 1
    }, {
      "URL": {
        "Description": "Abilities",
        "Url": "https://www.test2.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the abilities that we have to offer.</p></div>",
      "Name": "Capabilities",
      "ID": 1
    }
  ]}
}

这是我的 HTML：

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6" ng-repeat= "link in links | unique:'DocCategory'">
          <h1 class="category">{{link.DocCategory}}<h1>
          <h2 class="subcategory"><span class="subcatspan">{{link.DocSubCategory}}</span></h2>
          <a class="links" href={{link.URL.Url}} target="_blank">{{link.URL.Description}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

编辑：我试图隐藏视图中的重复项，而不是完全删除它们。

【问题讨论】：

How to make ng-repeat filter out duplicate results的可能重复
你想分组吗？
@Sajeetharan 我想按 DocCategory 分组。我从 JSON 中通过Order0 订购。

标签： javascript angularjs

【解决方案1】：

你需要使用 'grouBy' 和 angular-filter

演示

var app = angular.module('test',['angular.filter'])
app.controller('testCtrl',function($scope){
  $scope.data= {
  "d": {
    "results": [{
      "URL": {
        "Description": "Capabilities",
        "Url": "https://www.test.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "first",
      "Name": "Capabilities",
      "ID": 1
    }, {
      "URL": {
        "Description": "Abilities",
        "Url": "https://www.test2.com"
      },
      "Comments": null,
      "DocCategory": "The LIFE Links",
      "DocSubCategory": "The Sales Program",
      "Order0": 1,
      "Description": "<div class=\"ExternalClass7655A65DDC5041F9B50820BD16C94366\"><p>\u200bThis is a link to show all of the abilities that we have to offer.</p></div>",
      "Name": "Capabilities",
      "ID": 1
    }
  ]}
};
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>

<body ng-app='test' ng-controller='testCtrl'>
 <div class="row" ng-repeat="log in data.d.results | groupBy: 'DocCategory'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>DocSubCategory</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log" >
                        <td>{{item.DocSubCategory }}</td>
                        <td>{{item.Description}}</td>
                        
                    </tr>
                </tbody>
            </table>
        </div>
</body>

【讨论】：