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?
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">
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 }">
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.
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 } }">
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.
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.
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 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>
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.
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>
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}">
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