为什么过滤器在 angular js 中不起作用?

本文介绍了为什么过滤器在 angular js 中不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 input 字段和 date 字段 过滤我的列表，点击按钮.当我填写这个字段时到站DEL"和从站""PNQ" "flight_date" "10-01-2017" .it 应该是一个结果 .current 它显示没有结果.

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="[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>

这篇关于为什么过滤器在 angular js 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..