warum Filter in angular js nicht funktioniert?

Question

Ich versuche, meine Liste mit input Feld und date field auf Knopfdruck zu filtern. Wenn ich dieses Feld füllte, "um Station" DEL "und" von der Station "" PNQ "" flight_date "" 10-01-2017 ". Sollte es sollte man .Current es kein Ergebnis zeigen, führen.

hier ist mein Code https://plnkr.co/edit/k4FBxqufETslgYxm4zEx?p=preview

$scope.searchClick =function(){ 
    if($scope.fromStation!='' && $scope.toStation!='' && $scope.departDate !=''){ 
    $scope.names = $scope.names.filter(function(item){ 
     return item.to_station === $scope.toStation 
     && item.from_station === $scope.fromStation 
     && item.flight_date === $scope.departDate 
    }) 
    } 

erwartete Ausgabe

{ 
    "to_station_name": "Delhi", 
    "to_station": "DEL", 
    "from_station": "PNQ", 
    "from_station_name": "Pune", 
    "depart_time": "12:00AM", 
    "arrival_time": "4:00PM", 
    "PNR": "AL_201", 
    "flight_date": "10-01-2017", 
    "fare": "900" 
    }, 

Answer 1

Sie Ihre Eingabe t ändern von Datum zu Text, um es zum Laufen zu bringen.

EDIT: da Sie Datumseingabe behalten möchten, versuchen Sie dies:

//Initialize departDate as a js date object 
$scope.departDate = new Date(); 
//Function to convert js date object to string 
function formattedDate(d = new Date) { 
    let month = String(d.getMonth() + 1); 
    let day = String(d.getDate()); 
    const year = String(d.getFullYear()); 

    if (month.length < 2) month = '0' + month; 
    if (day.length < 2) day = '0' + day; 

    return `${day}-${month}-${year}`; 
} 
$scope.searchClick =function(){ 
    if($scope.fromStation!='' && $scope.toStation!='' && $scope.departDate !=''){ 
    console.log($scope.departDate) 
    console.log(formattedDate($scope.departDate)) 
    //Use formattedDate function to compare your departDate with your model data 
    $scope.names = $scope.names.filter(function(item){ 
     console.log(item.flight_date) 
     return item.to_station === $scope.toStation 
     && item.from_station === $scope.fromStation 
     && item.flight_date === formattedDate($scope.departDate) 
    }) 
    } 
} 
}); 

Answer 2

Ihre Vergleiche der Daten nicht gleich sind. Sie müssen beide Zeichenfolgen in ein gültiges Date-Objekt konvertieren, bevor Sie sie vergleichen können.

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    var defaultNames = [{ 
 
     "to_station_name": "Delhi", 
 
     "to_station": "DEL", 
 
     "from_station": "PNQ", 
 
     "from_station_name": "Pune", 
 
     "depart_time": "12:00AM", 
 
     "arrival_time": "4:00PM", 
 
     "PNR": "AL_201", 
 
     "flight_date": "10-01-2017", 
 
     "fare": "900" 
 
    }, 
 
    { 
 
     "to_station_name": "Delhi", 
 
     "to_station": "DEL", 
 
     "from_station": "PNQ", 
 
     "from_station_name": "Pune", 
 
     "depart_time": "8:00AM", 
 
     "arrival_time": "11:00AM", 
 
     "PNR": "AL_203", 
 
     "flight_date": "06-01-2017", 
 
     "fare": "800" 
 
    }, 
 
    { 
 
     "to_station_name": "Delhi", 
 
     "to_station": "DEL", 
 
     "from_station": "PNQ", 
 
     "from_station_name": "Pune", 
 
     "depart_time": "11:00AM", 
 
     "arrival_time": "2:00PM", 
 
     "PNR": "AL_204", 
 
     "flight_date": "09-01-2017", 
 
     "fare": "800" 
 
    }, 
 
    { 
 
     "to_station_name": "Pune", 
 
     "to_station": "PNQ", 
 
     "from_station": "DEL", 
 
     "from_station_name": "Delhi", 
 
     "depart_time": "10:00AM", 
 
     "arrival_time": "1:00PM", 
 
     "PNR": "AL_202", 
 
     "flight_date": "11-01-2017", 
 
     "fare": "900" 
 
    }, 
 
    { 
 
     "to_station_name": "Pune", 
 
     "to_station": "PNQ", 
 
     "from_station": "DEL", 
 
     "from_station_name": "Delhi", 
 
     "depart_time": "8:00AM", 
 
     "arrival_time": "10:00AM", 
 
     "PNR": "AL_208", 
 
     "flight_date": "14-01-2017", 
 
     "fare": "1000" 
 
    }, 
 
    { 
 
     "to_station_name": "Pune", 
 
     "to_station": "PNQ", 
 
     "from_station": "DEL", 
 
     "from_station_name": "Delhi", 
 
     "depart_time": "10:00AM", 
 
     "arrival_time": "2:00PM", 
 
     "PNR": "AL_211", 
 
     "flight_date": "13-01-2017", 
 
     "fare": "1000" 
 
    } 
 
    ]; 
 

 
    function getNames() { 
 
    if ($scope.fromStation != '' && $scope.toStation != '' && $scope.departDate != '') { 
 
     let departDate = new Date($scope.departDate); 
 
     departDate.setHours(0, 0, 0, 0); 
 
     $scope.names = defaultNames.filter(function(item) { 
 
     let dateArr = item.flight_date.split("-"); 
 
     dateArr = dateArr.reverse(); 
 
     let dateFormat = dateArr.join("-"); 
 
     let flightDate = new Date(dateFormat); 
 
     flightDate.setHours(0, 0, 0, 0); 
 
     return item.to_station === $scope.toStation && 
 
      item.from_station === $scope.fromStation && 
 
      departDate.getTime() == flightDate.getTime(); 
 
     }) 
 
    } else { 
 
     $scope.names = defaultNames; 
 
    } 
 
    } 
 
    $scope.fromStation = ''; 
 
    $scope.toStation = ''; 
 
    $scope.departDate = ''; 
 
    $scope.names = []; 
 
    getNames(); 
 

 
    $scope.searchClick = function() { 
 
    getNames(); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    From:: <input type="text" ng-model="fromStation" placeholder="From station"> TO:: <input type="text" ng-model="toStation" placeholder="To station"> 
 
    <br></br> 
 
    DEPART Date:: <input type="date" ng-model="departDate" placeholder="select date"> 
 
    <button ng-click="searchClick()">search</button> 
 
    <ul> 
 
    <li ng-repeat="x in names"> 
 
     FROM: {{ x.from_station_name }} ------ TO:{{ x.to_station_name }} 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>