У меня есть несколько div на моей странице, которые используют ng-if, чтобы показать. Моя проблема в том, что некоторые элементы являются дубликатами.
То, что я хотел бы сделать, это использовать другое выражение в ng-if для этого примера, который я добавил ниже (hideMultiplePost), чтобы скрыть эти повторяющиеся элементы, и моя идея состоит в том, чтобы идентифицировать их, добавив класс, который использует идентификатор сообщения, так как дубликаты элементов разделяют тот же идентификатор.
<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), где я проверяю наличие дубликатов классов и исключаю их из внешнего интерфейса, но оставляю одно из них, поскольку я не хочу их исключать.
Если вы не можете управлять данными, вы можете удалить обманки с помощью фильтра. Я предположил, что это 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/
Вы можете использовать существующий "уникальный" фильтр, предоставляемый угловым пользовательским интерфейсом.
Уникальный фильтр позволяет вам указать поле в вашей модели, которое должно быть уникальным. Я предполагаю, что все ваши сообщения имеют 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>