Wie nach Datumsbereich in AngularJS

Am neuen in AngularJS, ich schaffe eine Suchvorlage, wählen Sie eine Von Datum und eine Um Datum, ich brauche Ergebnis dieses Bereichs suchen, wenn ich auf die Schaltfläche Suche klicken.Wie nach Datumsbereich in AngularJS

nach der Suchtaste klicken das Ergebnis gefüllt werden muss,

table td, 
 
th { 
 
    font-size: 11px; 
 
    font-weight: 500; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div class="clearfix" ng-controller="tableDataCtrl"> 
 
    From : <input type="date" id="fromDate" name="fromDate"><br> To : <input type="date" id="toDate" name="toDate"><br> 
 
    <input type="button" id="searchButton" value="Search"><br> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th ng-repeat="th in tableHeader"> 
 
      {{th}} 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="tr in tableData"> 
 
      <td ng-repeat="td in tr"> 
 
      {{td}} 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
<script> 
 
    var app = angular.module('myApp', []); 
 
    app.controller('tableDataCtrl', function tableDataCtrl($scope, $http) { 
 
    // $http.get("https://api.myjson.com/bins/uwz13").then(function (response) { 
 

 
    $http.get("https://api.myjson.com/bins/cl913").then(function(response) { 
 
     // console.log(response); 
 
     $scope.tableData = response.data.data; 
 
     $scope.tableHeader = response.data.header; 
 
    }); 
 
    }); 
 
</script>

Quelle

2017-12-24 Ajeeb Kalathingalthodi

Sie müssen zuerst InvoiceDate in Datum umwandeln und dann mit fromDate und toDate vergleichen – digit

Die beste Praxis in AngularJS für das, was Sie tun möchten, ist ein Filter wie diese zu erstellen:

Dieser Filter nimmt Ihre Liste der Datenelemente, zu filtern nach ("InvoiceDate" in Ihrem Fall), Datumsbereich starten ein d Ende. Es gibt nur die Elemente zurück, die zwischen den Datumsbereichsgrenzen liegen.

Es kann direkt in HTML verwendet werden (aktualisiert, wenn Parameter geändert):

<tr ng-repeat="tr in tableData | dateRange: 'InvoiceDate':fromDate:toDate">

Oder Sie können es programmatisch in JavaScript verwenden (Auffrischungen auf Anfrage):

$filter('dateRange')($scope.tableData, 'InvoiceDate', fromDate, toDate);

Kasse diese jsfiddle die demonstriert die obige Lösung.

Quelle

2017-12-24 14:47:43

Wie nach Datumsbereich in AngularJS

Antwort

Verwandte Themen