Angular JS ng: Wiederholungsfilter basierend auf der Option

Question

Ich bin neu in Angular. Ich versuche, den angezeigten Datensatz basierend auf der ausgewählten Option mit einem Auswahlfeld zu filtern.

<div ng-controller="CurrentTrandetailsController"> 
    <div> 
     <div class="pull-right">   
      <label for="show-filter" class="show-label">Show </label> 
      <select name="show-filter" ng-model="searchText.accruedcard" id="show-filter" ng-options="trandetail.accruedcard as trandetail.accruedcard for trandetail in currentTrandetails.trandetails "> 
       <option value="">All</option> 
      </select>      
     </div> 
     <h3>Current trandetails</h3> 
    </div> 
    <div> 
     <table class="table table-striped table-hover"> 
      <tbody> 
       <tr ng-repeat="trandetail in currentTrandetails.trandetails | filter:searchText"> 
        <td>{{trandetail.dateAccrued}}</td> 
        <td>{{trandetail.accruedcard}}</td> 
        <td>{{trandetail.placeAccrued}}</td> 
        <td>{{trandetail.discountcents}}</td> 
        <td>{{trandetail.shortExpiryDate}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

I verwendet, um das in http://docs.angularjs.org/api/ng.filter:filter gegebene Beispiel, das ein Eingabefeld verwendet zu filtern. Beim Auswählen einer bestimmten Karte scheint es gut zu filtern. Wenn ich jedoch "All" wähle, dessen Wert auf "" gesetzt ist, werden nicht alle Einträge angezeigt (löschen Sie den Filter). In dem gezeigten Beispiel werden jedoch alle Einträge angezeigt, wenn das Textfeld gelöscht ist.

Was mache ich falsch?

Answer 1

Sie müssen Ihre wählen ändern:

<select name="show-filter" ng-model="searchText" ... 

statt

<select name="show-filter" ng-model="searchText.accruedcard" ... 

Erläuterung: Von dem, was ich gesehen habe, ist es nicht üblich, eine hartcodierte zu verwenden Option zusammen mit ng-Optionen und dies trägt zum Problem bei. Der Filter verwendet das select-Modell, das derzeit ein Objekt anstelle einer Zeichenfolge ist, wie im Beispiel "Angular". Object patterns are okay, aber in diesem Fall werden die Eigenschaften des Objekts null, wenn All ausgewählt ist, weil es nicht in die selected wie die restlichen Optionen ausgewählt ist.

Dies führt dazu, dass der Filter searchText fehlschlägt, weil er gültige Zeichenfolgen erwartet (auch wenn ein Objekt für das passende Muster verwendet wird).

Durch Verwendung eines String-Primitivs für das select-Modell wird All 'hack' beibehalten, da das Modell des selects ('') anstelle von null wird, was zu allem passt und alle Ergebnisse angezeigt werden.

Answer 2

Ich lief auf das gleiche Problem. Die Art, wie ich es repariert habe, war .toString() im Filter.