Chcę użyć filter
w kątowym i chcę filtrować pod kątem wielu wartości, jeśli ma jedną z wartości, powinna zostać wyświetlona.
Mam na przykład taką strukturę:
Obiekt, movie
który ma właściwość genres
i chcę filtrować pod kątem Action
i Comedy
.
Wiem, że mogę filter:({genres: 'Action'} || {genres: 'Comedy'})
, ale co zrobić, jeśli chcę to dynamicznie filtrować. Na przykładfilter: variableX
Jak ustawić variableX
w $scope
, kiedy mam tablicę gatunków, które muszę filtrować?
Mógłbym skonstruować go jako ciąg, a następnie wykonać, eval()
ale nie chcę używać eval () ...
javascript
angularjs
angularjs-ng-repeat
JustGoscha
źródło
źródło
filter:({genres: 'Action'} || {genres: 'Comedy'})
ogóle działa? nie wchodziangular 1.3.16
.Odpowiedzi:
Po prostu utworzyłbym niestandardowy filtr. Nie są takie trudne.
szablon:
Edytuj tutaj jest łącze: Tworzenie filtrów kątowych
AKTUALIZACJA : Oto skrzypce, które zawierają dokładne demo mojej sugestii.
źródło
Do filtrowania można użyć funkcji kontrolera.
HTML:
źródło
$scope.filteredMovies = $filter('filter')($scope.movies, $scope.filterByGenres);
Tworzenie niestandardowego filtra może być tutaj przesadą, możesz po prostu przekazać niestandardowy komparator, jeśli masz wartości wielokrotności, takie jak:
następnie w filtrze:
źródło
ng-model
znajdować się w pliku widoku, aby połączyć się z opisanym filtrem? (Niestety, wciąż uczą tutaj) - lubię prostotę odpowiedź i staramy się działać, ale nie wiem, jak oznaczyć moje<input>
„sng-model
. :)Oto implementacja niestandardowego filtru, który będzie filtrował dane za pomocą tablicy wartości, będzie obsługiwał wiele obiektów kluczowych z zarówno tablicą, jak i pojedynczą wartością kluczy. Jak wspomniano wangularJS API AngularJS filter Doc obsługuje wiele filtrów kluczy z jedną wartością, ale poniżej niestandardowy filtr będzie obsługiwał tę samą funkcję co angularJS, a także obsługuje tablicę wartości i kombinację zarówno tablicy, jak i pojedynczej wartości kluczy. Poniżej znajduje się fragment kodu,
Stosowanie:
Oto przykład skrzypiec z implementacją powyższego niestandardowego filtra „filterMutiple” . ::: Przykład skrzypiec :::
źródło
length property undefined
błąd w konsoli.if (fData.length > 0){ this.filteredData = fData; }
na tylko:this.filteredData = fData;
Jeśli chcesz filtrować według tablicy obiektów, możesz dać
filter:({genres: 'Action', key :value }.
Indywidualna właściwość zostanie przefiltrowana według konkretnego filtru podanego dla tej właściwości.
Ale jeśli chcesz filtrować według poszczególnych właściwości i filtrować globalnie dla wszystkich właściwości, możesz zrobić coś takiego.
~ Atul
źródło
Spędziłem nad tym trochę czasu i dzięki @chrismarx zobaczyłem, że domyślne ustawienie angulara
filterFilter
pozwala na przekazanie własnego komparatora. Oto edytowany komparator dla wielu wartości:A jeśli chcemy zrobić niestandardowy filtr dla DRY:
A potem możemy go używać w dowolnym miejscu:
Wreszcie mamy plunkr .
Uwaga: Oczekiwana tablica powinna zawierać tylko proste obiekty, takie jak String , Number itp.
źródło
możesz użyć filtru searchField dla angular.filter
JS:
HTML:
źródło
search
zatrzymuje się tutaj.Możesz także użyć,
ngIf
jeśli pozwala na to sytuacja:źródło
Najszybszym rozwiązaniem, które znalazłem, jest użycie
filterBy
filtra z filtra kątowego , na przykład:Zaletą jest to, że filtr kątowy jest dość popularną biblioteką (~ 2,6 tys. Gwiazdek na GitHub), która jest nadal aktywnie rozwijana i utrzymywana, więc dodanie jej do projektu jako zależności powinno być w porządku.
źródło
Myślę, że właśnie tego szukasz:
źródło
Spróbuj tego
źródło
Załóżmy, że masz dwie tablice, jedną dla filmów i jedną dla gatunku
Po prostu użyj filtra jako:
filter:{genres: genres.type}
Tutaj gatunki będące tablicą i typem mają wartość dla gatunku
źródło
Napisałem to dla stringów ORAZ funkcjonalności (wiem, że to nie jest pytanie, ale szukałem i dostałem tutaj), może da się to rozszerzyć.
Stosowanie:
źródło
Moduł kątowy lub filtracyjny
$filter('orFilter')([{..}, {..} ...], {arg1, arg2, ...}, false)
tutaj jest link: https://github.com/webyonet/angular-or-filter
źródło
Miałem podobną sytuację. Pisanie niestandardowego filtra zadziałało dla mnie. Mam nadzieję że to pomoże!
JS:
HTML:
źródło
Oto mój przykład, jak utworzyć filtr i dyrektywę dla tabeli jsfiddle
dyrektywy pobierz listę (dane) i utwórz tabelę z filtrami
z przyjemnością, jeśli ci pomogę
źródło
Za późno na dołączenie do imprezy, ale może to komuś pomoże:
Możemy to zrobić w dwóch krokach, najpierw filtrując według pierwszej właściwości, a następnie łącząc według drugiego filtru:
Zobacz działające skrzypce z filtrem wielu właściwości
źródło
OPCJA 1: Korzystanie z parametru porównawczego filtru zapewnianego przez Angular
OPCJA 2: Użycie Angular zapewniared negację filtru
źródło
Moje rozwiązanie
źródło
najlepsza odpowiedź to:
źródło