Filtern, indem Sie mehrere Kontrollkästchen in AngularJS

erste mal, dass ich gepostet habe eine Frage hier, also entschuldige mich im Voraus, wenn ich gegen eine Stack-Overflow-Etikette! 🙂

Bin ich mit ein paar AngularJS zum ersten mal in Reihenfolge zu erstellen ein proof-of-concept für meinen Chef. Es ist eine grundlegende Autovermietung listings app, mit einer Liste der Resultate in der main-Spalte, und ein filter-Bedienfeld unten auf der Seite. Ich habe geschafft, in die die Ergebnisse aus einem JSON-Objekt, und wenden Sie eine einfache filter, wie unten;

<article data-ng-repeat="result in results | filter:search" class="result">
    <h3>{{result.carType.name}}, &pound;{{result.price.value}}</h3>
    <img class="car-type" alt="{{result.carType.name}}" src="{{result.carType.image}}" />
    <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>

Filter

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

</fieldset>

...eine Sache, die ich noch nicht in der Lage zu arbeiten, obwohl, wie eine Gruppe von Kontrollkästchen, um einen filter anzuwenden, für die sagen, 'Fahrzeug', die würde haben Optionen wie 'mini', 'compact', 'Familie' und so weiter -, und der Benutzer wäre in der Lage zu filtern, durch ein oder mehrere Optionen gleichzeitig auswählen. Ich weiß, ich 'ng-model' und vielleicht 'ng-change', ich weiß nur nicht, wie Sie es anwenden, um eine Gruppe von Checkboxen...?

Update: ich habe eine plunker so können Sie sehen, wo ich stehe:
http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

InformationsquelleAutor ParkerDigital | 2013-05-09

  1. 8

    Ich würde binden Sie alle die Kontrollkästchen, um ein Objekt sagen:

    app.js

    $scope.cartypes = {mini: false, compact:false};

    index.html

    <input type="checkbox" data-ng-model="cartypes.mini"> Mini
<input type="checkbox" data-ng-model="cartypes.compact"> Compact

    Und erstellen Sie eine benutzerdefinierte filter-Funktion, die zurückgibt, ob das Objekt enthält alle (ich nehme an, das ist, was Sie wollen) der geprüften Optionen.

    app.js

    app.filter('myfilter', function() {
    return function(items, options ) {
      //loop over all the options and if true ensure the car has them
      //I cant do this for you beacause I don't know how you would store this info in the car object but it should not be difficult
      return carMatches;
    };
});

    Dann können Sie es hinzufügen, um Ihre Vorlage wie diese:

    index.html

    <article data-ng-repeat="result in results | filter:search | myfilter:cartypes" class="result">
    Vielen Dank für diese. Das problem ist, das JSON ist in einem festen format, dass ich haben keine Kontrolle über, so dass ich denke, im Fall von "Auto-Typ", ich muss arbeiten mit strings. Entschuldigt, wenn ich bin nur Unverständnis für Ihre Lösung!
    Sorry für die Verspätung, ich war gestern. Sie sollten in der Lage sein, um die Iteration über alle cartypes im array und überprüfen Sie die Zeichenfolge enthält den Schlüssel für alle Schlüssel, die Karte zu wahren.
    Alternativ könnten Sie wandeln den string in eine richtige Liste nach Erhalt der Daten. Mit der http-Dienst können Sie diese über einen Erfolgs-callback (siehe docs.angularjs.org/api/ng.$http) mit einem resource-Objekt (das ist im Grunde ein einfacher (vielleicht zu einfach) rest-wrapper.) es kann getan werden mit dem $ - dann-Methode (docs.angularjs.org/api/ngResource.$resource). So müssen Sie nur sorgen über die Schnur einmal und arbeiten mit einer netten Liste aus.
    OK, danke nochmal für Eure Hilfe 🙂
    Du bist herzlich willkommen.

    InformationsquelleAutor martijnve

  2. 0

    Habe ich implementiert diese Lösung wie diese:

    @myapp.filter "storeFilter", ->
  (stores, type) ->
    _.filter stores, (store) -> type[store.name]

    und in der Ansicht ich habe bestanden:

    store in stores | storeFilter:store_type

    InformationsquelleAutor Leon

Schreibe einen Kommentar