Question

我正在尝试使用input字段和按钮点击时date field过滤我的列表。当我填写此字段“到站”DEL“和”从站“”PNQ“”flight_date“” 10-01-2017“。应该是一个结果。当前它没有显示结果。

这是我的代码 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"
  },

Answer 1

您可以将输入类型从日期更改为文本以使其正常工作。

编辑：既然你想保留日期输入，试试这个：

//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

您对日期的比较并不相同。您需要先将两个字符串转换为有效的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="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>

为什么过滤器不能在角度js中工作？

2 个答案: