为什么过滤器在angular js中不起作用? [英] why filter is not working in angular js?
本文介绍了为什么过滤器在angular js中不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用input字段并单击按钮上的date field来过滤列表.当我填写此字段时，到站点" DEL"和从站点""PNQ"飞行日期""10-01- 2017".应该有一个结果.当前没有任何结果.
I am trying to filter my list using input field and date field on button click .When I filled this field "to station "DEL" and "from station" "PNQ" "flight_date" "10-01-2017" .it should should one result .current it show no result .
这是我的代码 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"
},
推荐答案
您对日期的比较不相等.您需要先将两个字符串都转换为有效的Date对象，然后才能进行比较.
Your comparisons of the dates aren't equal. You need to convert both strings into a valid Date object before you can compare them.
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>
这篇关于为什么过滤器在angular js中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
