Список контактов с поисковым фильтром

Я хочу сделать список контактов с поисковым фильтром сверху, как это

введите описание изображения здесь

Многие люди говорят, что мы должны делать это, вызывая веб-API. Разве я не могу сделать это вручную, создавая какое-то имя в массивах. Я тоже пробовал эту ссылку

    https://stackru.com/questions/40678206/angular-2-filter-search-list

все еще нет результата. В материале также не найдено ни одного компонента ( https://material.angular.io/components), на некоторых сайтах упоминается, что мы должны использовать трубы для фильтра, трубы для меня - это совершенно новая концепция.?

Источник

3 ответа

Решение

Вы можете сделать что-то вроде этого:

https://stackblitz.com/edit/angular-vchhay

используя фильтр, вы можете использовать ввод для достижения этого.

Отредактировано с помощью Pipes:

https://stackblitz.com/edit/angular-vchhay

Использовать трубы действительно просто.

Источник

Если вы используете Angular 6, то каналы, которые фильтруют, больше не поддерживаются. Вы должны написать свою собственную трубу.

Посмотреть здесь

Angular не предоставляет каналы для фильтрации или сортировки списков. Разработчики, знакомые с AngularJS, знают это как filter и orderBy. В Angular нет эквивалентов.

Я хотел бы пойти с одним из этих вариантов:

  1. Angular Tutorial, создайте метод внутри вашего компонента, который будет фильтровать массив. Похоже на предложение Анкит Шармы.
  2. Фильтруйте в шаблоне с помощью jQuery. (не рекомендуется, но довольно просто) Это небольшой пример: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</li>
  </ul>  
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

Источник

Вы можете использовать filter ( см. это) метод Array отфильтровать ваш список и слушать (keyup) событие input а затем вызвать функцию для фильтрации вашего списка.

В Angular.js (v1) раньше был фильтр (теперь известный как pipe), который делал то же самое. Однако давно прошли те времена, когда Angular предоставил такую ​​функциональность. Это происходит главным образом из-за того, что трубы (угловые 2 и выше) либо чистые / нечистые. По умолчанию все каналы, предоставляемые Angular, являются чистыми и, следовательно, filterPipe больше не существует.

Вы можете обратиться по ссылке ниже, чтобы понять, почему команда Angular удалила такую ​​функциональность:

https://angular.io/guide/pipes

Источник
Другие вопросы по тегам