нг-если скрыть все элементы на странице, кроме 1

0

У меня есть несколько 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), где я проверяю наличие дубликатов классов и исключаю их из внешнего интерфейса, но оставляю одно из них, поскольку я не хочу их исключать.

  • 0
    Вам нужно отобразить дубликаты? Или вы можете исключить их внутри контроллера непосредственно в массиве / объекте?
  • 0
    Исключите их, но не все. Изменен последний абзац, чтобы быть понятным. Также я не хочу исключать их из массива только из внешнего интерфейса, поэтому я решил, что лучшим вариантом будет нацеливание на классы
Показать ещё 2 комментария
Теги:
ionic-framework
cordova

2 ответа

0
Лучший ответ

Если вы не можете управлять данными, вы можете удалить обманки с помощью фильтра. Я предположил, что это 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/

Поделиться
1

Вы можете использовать существующий "уникальный" фильтр, предоставляемый угловым пользовательским интерфейсом.

Уникальный фильтр позволяет вам указать поле в вашей модели, которое должно быть уникальным. Я предполагаю, что все ваши сообщения имеют 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>
Поделиться
  • 0
    ... так что включить дополнительную библиотеку для простого фильтра?
  • 0
    Спасибо, и это будет работать, но я не извиняюсь. Я получаю дубликаты идентификаторов, потому что у меня есть несколько данных, и я объединяю их вместе на одной странице. Таким образом, у меня есть несколько div каждый с ng-repeat, который вызывает w разные apis. Поскольку идентификаторы на каждом API будут конфликтовать, я хочу показать только 1, поэтому единственный способ сделать исключение - исключить классы, если эта информация не даст вам, ребята, лучшую идею.
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню