Why Filter Is Not Working In Angular Js?

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 s

Solution 1:

You can change your input type from date to text to get it working.

EDIT : since you want to keep date input, try this :

//Initialize departDate as a js date object$scope.departDate = new Date();
//Function to convert js date object to string functionformattedDate(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)
    })
  }
}
});

Solution 2:

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"
    }
  ];

  functiongetNames() {
    if ($scope.fromStation != '' && $scope.toStation != '' && $scope.departDate != '') {
      let departDate = newDate($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 = newDate(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><htmlng-app="plunker"><head><metacharset="utf-8" /><title>AngularJS Plunker</title><script>document.write('<base href="' + document.location + '" />');
  </script><linkrel="stylesheet"href="style.css" /><scriptdata-require="angular.js@1.4.x"src="https://code.angularjs.org/1.4.12/angular.js"data-semver="1.4.9"></script><scriptsrc="app.js"></script></head><bodyng-controller="MainCtrl">
  From:: <inputtype="text"ng-model="fromStation"placeholder="From station"> TO:: <inputtype="text"ng-model="toStation"placeholder="To station"><br></br>
  DEPART Date:: <inputtype="date"ng-model="departDate"placeholder="select date"><buttonng-click="searchClick()">search</button><ul><ling-repeat="x in names">
      FROM: {{ x.from_station_name }} ------ TO:{{ x.to_station_name }}
    </li></ul></body></html>