wake-up-neo.com

ng-repeat: Filtern Sie nach einem einzelnen Feld

Ich habe eine Reihe von Produkten, die ich mit ng-repeat wiederholen und verwende 

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

diese Produkte nach Farbe filtern. Der Filter funktioniert, aber wenn der Produktname/die Beschreibung usw. die Farbe enthält, bleibt das Produkt nach dem Anwenden des Filters erhalten.

Wie kann ich den Filter so einstellen, dass er nur auf das Farbfeld meines Arrays und nicht auf jedes Feld angewendet wird?

angularjsng-repeatangularjs-filter
463
Tim Webster

Siehe das Beispiel auf der Seite filter . Verwenden Sie ein Objekt und legen Sie die Farbe in der color -Eigenschaft fest:

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

Geben Sie die Eigenschaft an (d. H. colour), in der der Filter angewendet werden soll:

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

Sie können nach einem Objekt mit einer Eigenschaft filtern, die den Objekten entspricht, die Sie filtern müssen:

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' }">

Dies kann natürlich variabel übergeben werden, wie Mark Rajcok vorschlug.

170
Ben Lesh

Wenn Sie nach einem Enkel (oder tiefer) des angegebenen Objekts filtern möchten, können Sie die Objekthierarchie weiter ausbauen. Wenn Sie beispielsweise nach "thing.properties.title" filtern möchten, können Sie Folgendes tun:

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

Sie können auch nach mehreren Eigenschaften eines Objekts filtern, indem Sie sie einfach zu Ihrem Filterobjekt hinzufügen:

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

Am besten verwenden Sie dazu eine Funktion:

html 

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

Javascript 

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

Alternativ können Sie mit ngHide oder ngShow Elemente basierend auf bestimmten Kriterien dynamisch ein- und ausblenden.

93
Khader M A

Seien Sie vorsichtig mit dem Winkelfilter. Wenn Sie einen bestimmten Wert im Feld auswählen möchten, können Sie keinen Filter verwenden.

Beispiel:

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' }">

Dies wird beide auswählen, da etwas wie substr verwendet wird.
Das heißt, Sie möchten ein Produkt auswählen, bei dem "color" die Zeichenfolge "blue" enthält und nicht, wo "color" "blue" ist.

62
Petr B.

Suche nach Farbe: 

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

sie können auch ein inneres Nest machen.

filter:{prop1:{innerprop1:searchinput}}
17
CyberNinja

Wenn Sie Folgendes tun würden:

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

... Sie erhalten nicht nur Elemente von itemTypeId 2 und itemStatus 1, sondern auch Elemente mit itemType 20, 22, 202, 123 und itemStatus 10, 11, 101, 123. Dies liegt daran, dass der Filter: .. .} Die Syntax funktioniert wie eine Zeichenfolge, die eine Abfrage enthält.

Wenn Sie jedoch die Bedingung ": true " hinzufügen, wird nach genauem Treffer gefiltert:

<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>
9
Phil

Du musst benutzen filter:{color_name:by_colour} statt

filter:by_colour

Wenn Sie mit einer einzelnen Eigenschaft eines Objekts übereinstimmen möchten, schreiben Sie diese Eigenschaft anstelle von object. Andernfalls werden andere Eigenschaften übereinstimmen.

4
amit banerjee

mein Weg ist das

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 ist ein Eingabefeld oder was auch immer Sie möchten

So anzeigen

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

Geben Sie die Eigenschaft im Filter des Objekts an, auf das Sie den Filter anwenden möchten:

//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"
}]

Aber du willst den Filter nur auf den Vornamen anwenden 

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

Wenn Sie nach einem Feld filtern möchten:

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

Wenn Sie nach allen Feldern filtern möchten:

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

und https://docs.angularjs.org/api/ng/filter/filter gut für Sie

0
milad dn