爲什麼過濾器不能在角js中工作？

我試圖在按鈕單擊時使用input字段和date field過濾我的列表。當我填充此字段「到站」DEL「和」從站「」PNQ「」flight_date「」10-01-2017「一個應該引起.current它沒有顯示出結果。爲什麼過濾器不能在角js中工作？

這裏是我的代碼 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 
    }) 
    }

預期輸出

{ 
    "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" 
    },

來源

2017-06-19 user5711656

請編輯從鏈接到這個職位的相關代碼。該鏈接最終會過期，此時您的帖子對於其他類似問題的用戶而言幾乎沒有價值。此外，通過鏈接代碼而不是在這裏發佈，你實質上是在詢問那些試圖幫助你跳過不需要的箍來提供幫助的人。 –

你可以改變你輸入ŧ ype從日期到文本以使其工作。

編輯：既然你想保留數據輸入，試試這個：

//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) 
    }) 
    } 
} 
});

來源

2017-06-19 15:08:41 Rylyn

順便說一下，您可能想要使用兩個列表：一個包含完整數據，另一個包含結果。否則，您將在使用過濾器時截斷數據。 – Rylyn

這是不正確的如何用戶選擇日期..請刪除這個anwser – user5711656

更新我的答案保持日期輸入類型。但要小心，這種類型不適用於每個瀏覽器。 – Rylyn

您的日期比較是不相等的。您需要將兩個字符串轉換爲有效的Date對象，然後才能比較它們。

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="[email protected]" 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>

來源

2017-06-19 15:47:59 Hoyen

爲什麼過濾器不能在角js中工作？

回答

相關問題