Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2018, 11:52
Интересующийся
Отправить личное сообщение для AndreyAndreyKiev Посмотреть профиль Найти все сообщения от AndreyAndreyKiev
 
Регистрация: 19.07.2018
Сообщений: 15

Angular 2 Помогите реализовать фильтр
Доброго времени суток,

Есть json в component.ts :
data:JSON = [{name:"Вася",lastname:"Иванов",age:"25"},{name:"Боб",lastname:"Додсон",age:"18"}];


и в component.html :
<div id="filter">
  <div><label for="name">Имя</label> <input id="name" type="text">  </div>

  <div><label for="lastname">Фамилия</label> <input id="lastname" type="text"> </div>

  <div><label for="age">Возраст</label> <input id="age" type="number"> </div>
</div>


<div *ngFor="let item of data, let i=index">
 <p>{{ item.name }} {{item.lastname}}</p>
 <p>Возраст: {{ item.age }}</p> 
</div>


Нужно сделать так, чтобы когда, например, пишешь в фильтре имени "вас", из div`a *ngFor исчезали все div`ы, у которых в имени нет подстроки "вас", т.е. останется только Вася (data[0]).
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2018, 13:39
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,146

https://codeburst.io/create-a-search...4-21fd3a5bec5c
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2018, 21:21
Интересующийся
Отправить личное сообщение для AndreyAndreyKiev Посмотреть профиль Найти все сообщения от AndreyAndreyKiev
 
Регистрация: 19.07.2018
Сообщений: 15

Там показано как сделать фильтр для простого массива, можете подсказать как сделать для массива с json объектами? Как в моём примере
data:JSON = [{name:"Вася",lastname:"Иванов",age:"25"},{name:"Боб",lastname:"Додсон",age:"18"}]

Очень срочно нужно, Angular 4 пока плохо знаю и не могу написать такой pipe

Последний раз редактировалось AndreyAndreyKiev, 05.09.2018 в 22:03.
Ответить с цитированием
  #4 (permalink)  
Старый 06.09.2018, 06:51
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,146

<input id="name" type="text" [(ngModel)]="searchText" />

<div *ngFor="let item of data | filter : searchText">
 <p>{{ item.name }} {{item.lastname}}</p>
 <p>Возраст: {{ item.age }}</p> 
</div>

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
	searchText = searchText.toLowerCase();
	return items.filter( it => {
		  return it.name.toLowerCase().includes(searchText);
    });
   }
}
Ответить с цитированием
  #5 (permalink)  
Старый 06.09.2018, 10:38
Интересующийся
Отправить личное сообщение для AndreyAndreyKiev Посмотреть профиль Найти все сообщения от AndreyAndreyKiev
 
Регистрация: 19.07.2018
Сообщений: 15

Спасибо огромное вам
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите реализовать отображение для аддона к mozilla. Ingiborn Firefox/Mozilla 3 28.01.2014 17:23
Помогите советом! Как реализовать идею? lazerru Общие вопросы Javascript 9 27.02.2013 13:52
Ребята помогите правильно реализовать цепочки функций как в jquery mrgordon Общие вопросы Javascript 6 04.06.2012 19:40
Помогите реализовать идею shilinpavel Элементы интерфейса 8 07.09.2011 10:14
Помогите реализовать! strannik17 Элементы интерфейса 3 07.03.2011 14:48