我的页面上有几个div,使用ng-if来显示。我的问题是某些元素是重复的。
我想要做的是在ng-if中使用另一个表达式,我在下面添加了这个示例(hideMultiplePost)来隐藏这些重复的元素,我的想法是通过添加一个使用post id的类来识别它们,因为重复元素共享相同的ID。
<div ng-repeat="post in postList">
<div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)">
</div>
<div ng-repeat="post in postListV2">
<div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)">
</div>
有人可以让我在正确的方向上使用表达式(hideMultiplePost),我会检查重复的类并将它们从前端排除,但留下一个,因为我不想将它们全部排除。
答案 0 :(得分:1)
您可以使用现有的&#39; unique&#39;由角度UI提供的过滤器。
独特的过滤器允许您在模型中提供应该是唯一的字段。我假设您的所有帖子都有id
,并且此id
是唯一的。您可以根据此字段过滤掉多个帖子。
应用过滤器后,您仍然可以使用ng-if
语句检查帖子是否包含任何类别。
查看代码段以获取有关如何使用它的更多信息。
angular
.module('app', ['ui.filters']);
angular
.module('app')
.controller('PostListController', PostListController);
function PostListController() {
var vm = this;
vm.posts = getPosts();
}
function getPosts() {
return [{
"id": 1,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 2,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 3,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 4,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 5,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 3,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 4,
"title": "Post Title",
"content": "Post content here"
}];
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<div ng-app="app">
<div ng-controller="PostListController as vm">
<ul>
<li ng-repeat="post in vm.posts | unique:'id'">
<b>#{{ post.id }} {{ post.title }} </b><br />
<p>{{ post.content }}</p>
</li>
</ul>
</div>
</div>
&#13;
答案 1 :(得分:0)
如果您无法控制数据,则可以使用过滤器删除欺骗。我认为它是一个ng-repeat,但您可以编辑以供自己使用。小提琴中的更多细节。
<div ng-repeat="item in data | dedupe:'id'">
{{item.id}}: {{item.name}}
</div>
编辑:
Concat控制器中的两个源(postList
和postListV2
),然后使用过滤器进行重复数据删除:
function MyCtrl($scope) {
$scope.postList = postList;
$scope.data = $scope.postList.concat(postListV2)
}
小提琴中的更多信息: http://jsfiddle.net/Lvc0u55v/7736/