it-swarm.com.de

AngularJS: Benutzerdefinierte Filter und ng-repeat

Ich bin ein AngularJS-Neuling und baue eine kleine Proof-of-Concept-App für Mietwageneinträge auf, die einige JSON-Dateien einbindet und verschiedene Teile dieser Daten über eine NG-Wiederholung mit ein paar Filtern wiedergibt:

   <article data-ng-repeat="result in results | filter:search" class="result">
        <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header>
            <ul class="result-features">
                <li>{{result.carDetails.hireDuration}} day hire</li>
                <li data-ng-show="result.carDetails.airCon">Air conditioning</li>
                <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
                <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
            </ul>
    </article>

    <h2>Filters</h2>

    <h4>Doors:</h4> 
    <select data-ng-model="search.carDetails">
        <option value="">All</option>
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="9">9</option>
    </select>

    <h4>Provider:</h4>
    Atlas Choice <input type="checkbox"  data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br>
    Holiday Autos <input type="checkbox"  data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br>
    Avis <input type="checkbox"  data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>      

Jetzt möchte ich einen benutzerdefinierten Filter in meinem Controller erstellen, der die Elemente in meinem ng-repeat durchlaufen und nur die Elemente zurückgeben kann, die bestimmte Kriterien erfüllen. Beispielsweise kann ich ein Array von Werten erstellen, basierend auf den Kontrollkästchen der Anbieter überprüft werden, und bewerten Sie dann jedes ng-repeat-Element dahingehend. Ich kann nur nicht herausfinden, wie ich das in Bezug auf die Syntax machen würde - kann mir jemand helfen?

Hier ist mein Plunker: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

67
ParkerDigital

Wenn Sie eine benutzerdefinierte Filterlogik ausführen möchten, können Sie eine Funktion erstellen, die das Array-Element als Argument verwendet und true oder false zurückgibt, je nachdem, ob es in den Suchergebnissen enthalten sein soll. Übergeben Sie es dann an die Anweisung filter, genau wie Sie es mit dem Objekt search tun, zum Beispiel:

JS:

$scope.filterFn = function(car)
{
    // Do some tests

    if(car.carDetails.doors > 2)
    {
        return true; // this will be listed in the results
    }

    return false; // otherwise it won't be within the results
};

HTML:

...
<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result">
...

Wie Sie sehen, können Sie viele Filter miteinander verketten. Wenn Sie also Ihre benutzerdefinierte Filterfunktion hinzufügen, müssen Sie den vorherigen Filter nicht mit dem search -Objekt entfernen (sie arbeiten nahtlos zusammen).

156
mirrormx

Wenn Sie weiterhin einen benutzerdefinierten Filter wünschen, können Sie das Suchmodell an den Filter übergeben:

<article data-ng-repeat="result in results | cartypefilter:search" class="result">

Wo die Definition für den Cartypefilter so aussehen kann:

app.filter('cartypefilter', function() {
  return function(items, search) {
    if (!search) {
      return items;
    }

    var carType = search.carType;
    if (!carType || '' === carType) {
      return items;
    }

    return items.filter(function(element, index, array) {
      return element.carType.name === search.carType;
    });

  };
});

http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview

34
orjan

Sie können mehr als 1 Funktionsfilter im gleichen ng-repeat-Filter aufrufen

<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">
6
alvarodoune

Eine der einfachsten Möglichkeiten, dies zu beheben, ist die Verwendung von $ das ist die Suche alle.

Hier ist ein Plunker, der zeigt, wie es funktioniert. Ich habe die Kontrollkästchen auf Radio umgestellt (weil ich dachte, sie sollten sich ergänzen).

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

Wenn Sie dies auf eine ganz bestimmte Weise tun möchten (anstatt eine generische Suche durchzuführen), müssen Sie mit Funktionen in der Suche arbeiten.

Die Dokumentation ist hier

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

2
ganaraj