Mam szereg produktów, które powtarzam za pomocą ng-repeat i używam
<div ng-repeat="product in products | filter:by_colour">
aby filtrować te produkty według koloru. Filtr działa, ale jeśli nazwa / opis produktu itp. Zawiera kolor, produkt pozostaje po zastosowaniu filtra.
Jak ustawić filtr tak, aby stosował się tylko do pola koloru mojej tablicy, a nie do każdego pola?
angularjs
ng-repeat
angularjs-filter
Tim Webster
źródło
źródło
Odpowiedzi:
Zobacz przykład na stronie filtra . Użyj obiektu i ustaw kolor we właściwości color:
źródło
filter:{ color: '...', size: '...', ...}
Określ właściwość (tj.
colour
), W której chcesz zastosować filtr:źródło
'!'+
, tak jak to<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
<div ng-repeat="product in products | filter:{ resultsMap.annie: '!!' }">
albo (coś odpowiednik) tak:<div ng-repeat="product in products | filter:by">
i na kontrolerze:$scope.by = { 'resultsMap.annie': '!!' };
. To drugie podejście daje większą kontrolę nad filtrowaną właściwością. Uwaga:'!!'
oznacza „nie zerowy”.customFilter
może być prostym obiektemscope
, który aktualizujesz w razie potrzeby. Sprawdź ten plunker .Możesz filtrować według obiektu o właściwości pasującej do obiektów, które musisz na nim filtrować:
Można to oczywiście przekazać zmienną, jak sugerował Mark Rajcok.
źródło
Jeśli chcesz filtrować według wnuka (lub głębiej) danego obiektu, możesz kontynuować budowanie hierarchii obiektów. Na przykład, jeśli chcesz filtrować według „thing.properties.title”, możesz wykonać następujące czynności:
Możesz także filtrować według wielu właściwości obiektu, dodając je do obiektu filtru:
źródło
Najlepszym sposobem na to jest użycie funkcji:
HTML
javascript
Alternatywnie możesz użyć ngHide lub ngShow, aby dynamicznie wyświetlać i ukrywać elementy na podstawie określonych kryteriów.
źródło
Uważaj na filtr kątowy. Jeśli chcesz wybrać określoną wartość w polu, nie możesz użyć filtru.
Przykład:
javascript
HTML
Spowoduje to wybranie obu, ponieważ użyj czegoś takiego,
substr
co oznacza, że chcesz wybrać produkt, w którym „kolor” zawiera ciąg „niebieski”, a nie gdzie „kolor” to „niebieski”.
źródło
<div ng-repeat="product in products | filter: { color: 'blue' }:true">
będzie działać tylko na dokładnych dopasowaniach („prawda” na końcu to argument porównawczy: linkSzukaj według koloru:
możesz też zrobić gniazdo wewnętrzne.
źródło
Jeśli miałbyś wykonać następujące czynności:
... dostaniesz nie tylko elementy itemTypeId 2 i itemStatus 1, ale także przedmioty o itemType 20, 22, 202, 123 i itemStatus 10, 11, 101, 123. Jest tak, ponieważ filtr: {.. .} składnia działa jak ciąg zawierający zapytanie.
Jeśli jednak dodasz warunek : true , filtr zostanie dokładnie dopasowany:
źródło
moja droga jest taka
Wyświetlane w ten sposób
źródło
Musisz użyć
filter:{color_name:by_colour}
zamiastJeśli chcesz dopasować do pojedynczej właściwości obiektu, napisz tę właściwość zamiast obiektu, w przeciwnym razie niektóre inne właściwości zostaną dopasowane.
źródło
Określ właściwość w filtrze obiektu, do którego chcesz zastosować filtr:
Ale chcesz zastosować filtr tylko dla imienia
źródło
Jeśli chcesz filtrować dla jednego pola:
Jeśli chcesz filtrować dla wszystkich pól:
i https://docs.angularjs.org/api/ng/filter/filter dobre dla Ciebie
źródło