ng-如果隐藏页面中除1以外的所有元素
我的页面上有几个div，它们使用ng-if来显示。我的问题是某些元素是重复的。
我想做的是在ng中使用另一个表达式--在这个例子中，我添加了下面的(hideMultiplePost)来隐藏这些重复的元素，我的想法是通过添加一个使用帖子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)，我可以检查重复的类，并从前端排除它们，但留下一个，因为我不想全部排除它们。
回答 2
Stack Overflow用户
发布于 2016-07-31 22:19:24
如果您无法控制中的数据，则可以使用筛选器删除重复项。我假设它是一个ng-repeat，但您可以编辑以供自己使用。更多细节请参见小提琴。
<div ng-repeat="item in data | dedupe:'id'">
{{item.id}}: {{item.name}}
</div>编辑:合并控制器中的两个源(postList和postListV2)，然后使用过滤器进行重复数据删除：
function MyCtrl($scope) {
$scope.postList = postList;
$scope.data = $scope.postList.concat(postListV2)
}更多信息请访问：http://jsfiddle.net/Lvc0u55v/7736/
Stack Overflow用户
发布于 2016-07-31 22:21:18
你可以使用现有的由angular 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"
}];
}<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>
https://stackoverflow.com/questions/38684695
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号