ng-repeat: filtruj według pojedynczego pola


484

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?


Niestandardowe filtry są również potężne =), może ci się spodobać, przykład: noypi-linux.blogspot.com/2014/07/…
Noypi Gilas


Świetna pisownia kolorów we właściwej
kolejności

Odpowiedzi:


475

Zobacz przykład na stronie filtra . Użyj obiektu i ustaw kolor we właściwości color:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 

Dzięki Mark, czy są jakieś korzyści z robienia tego w ten sposób, a nie z metody sugerowanej poniżej?
Tim Webster,

7
@Seglespaan, niezupełnie. Może się okazać, że metoda przedstawiona przez bmleite i blesh czyta się ładniej, ponieważ widać, że filtrujesz według koloru. Ta metoda jest bardziej zwarta, co może być przydatne, jeśli chcesz wyszukiwać według wielu właściwości i wolisz nie mieć długiego obiektu w filter:{ color: '...', size: '...', ...}
kodzie

2
@MarkRajcok, jak mógłbym wyszukiwać według wielu właściwości, patrząc na związek, a nie na skrzyżowaniu?
jetcom

2
@jetcom, będziesz potrzebował niestandardowego filtra, patrz stackoverflow.com/a/13845135/215945
Mark Rajcok

1
Nie wiem, czy OP pytał, jak zrobić pole wyszukiwania, tak jak filtrować wartości w powtórzeniu ng, gdy powtarzają się na stronie. Odpowiedź pod tym wydaje się najbardziej odpowiednia do postawionego pytania.
twknab

573

Określ właściwość (tj. colour), W której chcesz zastosować filtr:

<div ng-repeat="product in products | filter:{ colour: by_colour }">

5
co jeśli chcę! by_colour jako filtr: {color:! by_colour} "
rjdmello,

27
@rjdmello po prostu prepend '!'+, tak jak to<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
bmleite

3
Nie wiem, czy mam rozumieć to poprawnie, ale pierwszą rzeczą, która przyszła mi do głowy było: <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”.
bmleite

2
@Federico, customFiltermoże być prostym obiektem scope, który aktualizujesz w razie potrzeby. Sprawdź ten plunker .
bmleite

1
To powinna być zaakceptowana odpowiedź. To jest najbardziej zwięzłe. Cóż, poza tym, że „kolor” ma zbyt wiele samogłosek.
Rap

176

Możesz filtrować według obiektu o właściwości pasującej do obiektów, które musisz na nim filtrować:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});
<div ng-repeat="product in products | filter: { color: 'red' }"> 

Można to oczywiście przekazać zmienną, jak sugerował Mark Rajcok.


2
powiedzmy, że mam tego rodzaju zakres. produkty: {id: 1, nazwa: „test”, kolor: „jasnoniebieski”}, {id: 2, nazwa: „bob”, kolor: [{pierwszy plan: czarny, tło : biały}]}. to jak mogę filtrować produkt według koloru: tła, aby uzyskać białą wartość?
Gery,

2
@Gery: Szczerze mówiąc, nie sądzę, że możesz. Tak czy inaczej, używając filtra: w ogóle jest to rodzaj złej praktyki, IMO. W tym sensie stawia logikę, która powinna znajdować się w twoim kontrolerze, i nie jest zbyt testowalna.
Ben Lesh,

Jest to sposób na przeniesienie filtrowania do kontrolera i rozszerzenie modelu. ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html .
ozkary

106

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:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

Możesz także filtrować według wielu właściwości obiektu, dodając je do obiektu filtru:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

2
jest to filtr typu „lub” lub „i”.
sms

1
To samo pytanie brzmi: AND lub OR podczas filtrowania więcej niż jednej właściwości?
lostintranslation

1
dla filtra OR jedynym sposobem jest filtr niestandardowy, myślę
Dmitri Algazin

99

Najlepszym sposobem na to jest użycie funkcji:

HTML

<div ng-repeat="product in products | filter: myFilter">

javascript

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

Alternatywnie możesz użyć ngHide lub ngShow, aby dynamicznie wyświetlać i ukrywać elementy na podstawie określonych kryteriów.


64

Uważaj na filtr kątowy. Jeśli chcesz wybrać określoną wartość w polu, nie możesz użyć filtru.

Przykład:

javascript

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

HTML

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

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”.


88
<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: link
Mark

21

Szukaj według koloru:

<input type="text" ng-model="searchinput">
<div ng-repeat="product in products | filter:{color:searchinput}">

możesz też zrobić gniazdo wewnętrzne.

filter:{prop1:{innerprop1:searchinput}}

10

Jeśli miałbyś wykonać następujące czynności:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... 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:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

4

moja droga jest taka

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

sub jest polem wejściowym lub czymkolwiek innym

Wyświetlane w ten sposób

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>

Ogólnie rzecz biorąc, używanie ng-if jest czystym rozwiązaniem
Kilizo

4

Musisz użyć filter:{color_name:by_colour}zamiast

filter:by_colour

Jeś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.


1

Określ właściwość w filtrze obiektu, do którego chcesz zastosować filtr:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

Ale chcesz zastosować filtr tylko dla imienia

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">

0

Jeśli chcesz filtrować dla jednego pola:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

Jeśli chcesz filtrować dla wszystkich pól:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

i https://docs.angularjs.org/api/ng/filter/filter dobre dla Ciebie

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.