Wie wenden Sie einen filter auf mehrere Objekte mithilfe von AngularJS?

Habe ich das user-Objekt wie folgt definiert.

$scope.users = [{id: 1, name: 'Adam', friends: [{name: 'John', age: 21, sex: 'M'}, {name: 'Brad', age: 32, sex: 'M'}]}]

Dann habe ich den folgenden code:

<div ng-repeat="user in users>
 <input type="text" ng-model="searchText">
 <div ng-repeat="friend in user.friends | filter:searchText">
  {{user.name}} {{friend.name}} {{friend.age}}
 </div>
</div>

Nun geben, wenn ich in die textbox den text: 'searchText', ich will den filter, um den Namen des Benutzers und den Namen/Alter des Freundes. Kann mir jemand helfen, wie dies zu tun?

Wenn ich richtig bin, dann denke ich, dass ich brauche zum erstellen eines benutzerdefinierten filters für diese oder gibt es eine andere Möglichkeit kann ich dies erreichen?

InformationsquelleAutor Sabarish Sankar | 2012-12-12
  1. 14

    Weil Sie filtern möchten, auf zwei Dinge auf einmal-einige Eigenschaften der Freunde, die array-und auch die Anwender-Sie müssen erstellen Sie Ihre eigenen benutzerdefinierte filter akzeptiert 2 Parameter:

    myApp.filter('myFilter', function() {
  return function(friends, searchText, username) {
    var searchRegx = new RegExp(searchText, "i");
    if ((searchText == undefined) || (username.search(searchRegx) != -1)) {
        return friends;
    }
    var result = [];
    for(i = 0; i < friends.length; i++) {
        if (friends[i].name.search(searchRegx) != -1 || 
            friends[i].age.toString().search(searchText) != -1) {
            result.push(friends[i]);
        }
    }
    return result;
  }
});

    Dann rufe es so auf:

    <div ng-repeat="user in users">
   <input type="text" ng-model="searchText">
   <div ng-repeat="friend in user.friends | myFilter:searchText:user.name">
      {{user.name}} {{friend.name}} {{friend.age}}
    </div>
</div>

    ":searchText:Benutzer.name" ist der Weg passieren Sie weitere Argumente, um einen benutzerdefinierten filter.

    Fiddle.

    • Vielen Dank Mark! Aber das filterFilter(Freunde, searchText) wird der filter auf alle Objekte von Freunden, die ich.e, name, Alter und Geschlecht oder sonst nur name und Alter. Meine Anforderung ist, ich will nur 'name' und 'Alter' werden durchsucht und die Ergebnisse gefiltert werden, nur auf diese zwei Objekte von Freunden, wie die Felder immer angezeigt werden und nicht auf 'sex'
    • Siehe aktualisierte Antwort.
    • Ich merke, wie alt dieser ist... aber was könnte geschehen, wenn meine Eingabe ist 'searchText' ist immer undefiniert im inneren des filters? Scoping Probleme, das ist klar, aber warum?
    • Ich schlage vor, Sie erstellen eine neue Frage, die Ihre HTML-und der filter.
    • Das war super hilfreich für mich, danke! Einzige Einschränkung möchte ich hinzufügen, dass ich verpasst, auf den ersten Blick war, dass wenn Sie angeben, dass der filter in der ng-repeat-Parameter, stellen Sie sicher, dass Sie ersetzen die üblichen "filter:" mit dem Namen Ihres filters (aka "meinfilter:<param1><param2>"). Auch nicht 100% sicher, was Sie tun, in die erste Zeile in der return-Funktion, die Prüfung für den Buchstaben "i" in der searchText. Ich brauchte nicht, dass in meiner Lösung, so nahm ich es.
    • ist ein RegExp " , das bedeutet "groß - / Kleinschreibung ignorieren".

    InformationsquelleAutor Mark Rajcok
  2. 1

    http://docs.angularjs.org/api/ng.filter:filter

    <div ng-repeat="user in users>
 <input type="text" ng-model="search.$">
 <div ng-repeat="friend in user.friends | filter:search">
  {{user.name}} {{friend.name}} {{friend.age}}
 </div>
</div>
    • Dank fastreload! Dies hilft! Aber was sind das Objekt dieser filter wird für? Wird dieser filter nur auf Benutzernamen und Freundin den Namen und das Alter?
    • Wie in der Dokumentation beschrieben, es würde die Suche für alle Eigenschaften von Objekten in ein array von Objekten. Sie können denken $ als eine Magische Platzhalter.
    • Dank fastreload! Hier in meinem Freundes-Objekt habe ich drei Attribute: name, Alter und Geschlecht. Aber ich will nicht die sex gesucht werden. Gibt es eine Möglichkeit, kann ich dies erreichen?
    • Sie müssen eine Funktion erstellen, die ein element im array und das Ergebnis true/false, je nach Ihren Bedürfnissen, und übergeben Sie den Namen der Funktion als filters parameter. " - Funktion: Eine Prädikat-Funktion kann verwendet werden, um schreiben beliebiger Filter. Die Funktion wird aufgerufen, für jedes element des array. Das Ergebnis ist ein array der Elemente, die das Prädikat true zurück für."
    InformationsquelleAutor Umur Kontacı
Schreibe einen Kommentar