wie AngularJS Ergebnis durch getrimmtes ng-Modell filtert

Question

Ich habe drei Eingabefelder Feld „Trade“

<input type="text" placeholder="Date YYYY" ng-model="search.DateYear"> 

<input type="text" placeholder="Date MM" ng-model="search.DateMonth"> 

<input type="text" placeholder="Date DD" ng-model="search.DateDay"> 

Die Daten von SQL Server filtern abgerufen werden, und das Datum ist wie dies

{ "dayOfMonth": 9, "dayOfWeek": "MONTAG", "dayOfYear": 130, "Monat": "MAY", "monthValue": 5, "Jahr": 2016, "Stunde": 12, "Minute" : 38, "nano": 0, "zweite": 57, "chronology": {"id": "ISO", "calendarType": "iso8601"}

so, wenn ich mit ng-repeat filtern wollen, wird es sein wie:

<tr ng-repeat="trade in trades|filter:tradeDate.year:search.DateYear, 
tradeDate.monthValue:search.DateMonth,tradeDate.dayOfMonth:search.DateDay"> 

<td>{{trade.blahhblahhField}}</td> 
<td>{{trade.blahhblahhField}}</td> 
<td>{{trade.tradeDate}}</td> 
</tr> 

Aber jetzt habe ich es zu einem Eingabefeld (ng-model:search.tradeDate) ändern möchten, die das Format „YYYY-MM-DD“ hat. Wie filtere ich das?

habe ich versucht, diese Art von Ansatz:

ng-repeat="trade in trades|filter:tradeDate.year:trimYear(search.tradeDate), 
tradeDate.monthValue:trimMonth(search.tradeDate),tradeDate.dayOfMonth:trimDay(search.tradeDate)" 

so etwas wie diese und 3 Funktionen in js erstellen zu trimmen (ex: 2016.05.20)

Jahr: 2016 Teilzeichen

zu erhalten

$scope.trimYear = function(input){ 
     var res = input.substring(0,4); 
    return res; 
    }; 

Monat: Teilzeichenfolge bekommen 5 (nicht 05 seit Monatswert von Daten 5 sein)

Tag: Substring um 20 zu bekommen

Aber das würde nicht funktionieren; Ich gehe davon aus, dass beim ersten Laden keine Eingabe erfolgt. Ich bin noch neu in diesem Bereich. Gibt es einen anderen Weg?

Answer 1

Sie können dies leicht mit einem benutzerdefinierten Filter erreichen. Hier ist ein Beispiel, wie Sie den Filter erstellen könnten (ich musste über einige Dinge raten, also müssen Sie dies vielleicht optimieren, um es genau für Ihre Situation zu bekommen). In der Filterfunktion input ist die Liste der Trades von Ihrem ng-repeat und search der ng-model Wert von dem Eingang, wo Sie ng-model="search" haben.

.filter('customDateFilter', function() { 
    return function(input, search) { 
     var out = []; 
     angular.forEach(input, function(item) { 
      if(!search){ 
       out.push(item); 
      } else { 
       var year = parseInt(search.substring(0,4)); 
       var month = parseInt(search.substring(5,7)); 
       var day = parseInt(search.substring(8,10)); 
       if(item.tradeDate.year === year && item.tradeDate.monthValue === month && item.tradeDate.dayOfMonth === day){ 
        out.push(item); 
       } 
      } 
     }); 
     return out; 
    } 
}) 

Dies ist sehr spezifisch, so wird es nur entsprechen, wenn das vollständige Datum eingegeben wurde und Sie bestätigen müssen, dass die Benutzer in YYYY-MM-DD-Format eingeben (oder besser noch, verwenden Sie eine Datepicker Kontrolle). Jetzt können Sie diese Filter in Ihrem HTML verwenden:

<tr ng-repeat="trade in trades | customDateFilter: search"> 

Mit diesem Bit von HTML-Markup Sie übergeben das trades Objekt (das eine Reihe von Trades ist) an die customDateFilter Filter und Leiten die ng-modelsearch an die Filterfunktion .