使用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>
编辑：我试图隐藏视图中的重复项，而不是完全删除它们。
最佳答案
您需要将“ groupBy”与角度过滤器配合使用
演示
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>