为什么过滤器不能在角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中工作？

回答

相关问题