ng-repeat: Nach einzelnem Feld filtern

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

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

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

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

Siehe das Beispiel auf der Filterseite . Verwenden Sie ein Objekt und legen Sie die Farbe in der Farbeigenschaft fest:

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

Geben Sie die Eigenschaft (dh colour) an, auf die der Filter angewendet werden soll:

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

Sie können nach einem Objekt filtern, dessen Eigenschaft mit den Objekten übereinstimmt, nach denen 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 als Variable übergeben werden, wie Mark Rajcok vorgeschlagen hat.

Wenn Sie nach einem Enkelkind (oder tiefer) des angegebenen Objekts filtern möchten, können Sie Ihre 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 Ihrem Filterobjekt hinzufügen:

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

Der beste Weg, dies zu tun, ist die Verwendung einer Funktion:

html

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

Javascript

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

Alternativ können Sie ngHide oder ngShow verwenden, um Elemente basierend auf bestimmten Kriterien dynamisch ein- und auszublenden.

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 wählt beide aus, da so etwas wie substr
Das bedeutet, dass Sie ein Produkt auswählen möchten, bei dem "Farbe" die Zeichenfolge "Blau" enthält und nicht, bei dem "Farbe" "Blau" ist.

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

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 würden nicht nur Artikel von itemTypeId 2 und itemStatus 1 erhalten, sondern auch Artikel mit itemType 20, 22, 202, 123 und itemStatus 10, 11, 101, 123. Dies liegt daran, dass der Filter: {.. Die Syntax.} funktioniert so, als ob eine Zeichenfolge eine Abfrage enthält.

Wenn Sie jedoch die Bedingung : true hinzufügen , wird nach exakter Übereinstimmung 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>

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>

Sie müssen filter:{color_name:by_colour}anstelle von verwenden

filter:by_colour

Wenn Sie mit einer einzelnen Eigenschaft eines Objekts übereinstimmen möchten, schreiben Sie diese Eigenschaft anstelle des Objekts, da sonst eine andere Eigenschaft übereinstimmt.

Geben Sie im Filter die Eigenschaft 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"
}]

Sie möchten den Filter jedoch nur auf den Vornamen anwenden

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

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 für alle Felder 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