Reset the filter if match not found in select box

Question

I am trying to create a filter which will show the results in the table based on the selection in the select box.

Also, by default the 'City' select box will be set user location which I'm grabbing and setting ng-init="my.city='${city}'". So, the default results would be filtered based on user location.

The only problem I've is, when the user location doesn't match any of the values in my 'City' select box, it should be reset. i.e. 'Select a city' option should be selected, and all the results would be shown without any filter being applied.

In my code, if I select any of the city and then try to select 'Select a city' the filter is not getting reset'.

How do I fix this?

Here's the complete code:

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
 $scope.loc = {
  Sydney: 4,
  Toronto: 7,
  London: 3,
  Berlin: 7
 };
 $scope.country = ['Australia', 'India', 'Germany', 'China', 'Canada', 'United Kingdom'];
 $scope.fullData = [{
  name: 'ABC',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'DEF',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'ABC',
  countryName: 'United Kingdom',
  city: 'London'
 }, {
  name: 'ABC',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'DEF',
  countryName: 'Canada',
  city: 'Toronto'
 }, {
  name: 'DEF',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'BCD',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Canada',
  city: 'Toronto'
 }];
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container">
  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
      <div class="col-md-3">
        <label>Search Keyword:</label>
        <input type="text" class="form-control" ng-model="my.$"/>
      </div>
      <div class="col-md-3">
        <label>Country:</label>
        <select class="form-control" ng-model="my.countryName" ng-options="countryName as countryName for countryName in country">
          <option value="" selected>Select a country</option>
        </select>
      </div>
      <div class="col-md-3">
        <label>City</label>
        <select class="form-control" ng-model="my.city" ng-init="my.city='${city}'" ng-options="key as key for (key, value) in loc">
          <option value="" selected>Select a city</option>
        </select>
      </div>
    </div>
    <hr />
    <div class="row">
      <table class="table table-bordered">
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
        </tr>
        <tr ng-repeat="item in fullData | filter: my">
          <td>{{item.name}}</td>
          <td>{{item.countryName}}</td>
          <td>{{item.city}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 1

in this case filter aplied in empty object that was a property named city but your all property of object that filter applied on it should have an empty value in first .

you must initial your object in your controller

 $scope.my={$:'',countryName:'',city:''};

and delete ng-init city property

try folowing

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.my={$:'',countryName:'',city:''};
 $scope.loc = {
  Sydney: 4,
  Toronto: 7,
  London: 3,
  Berlin: 7
 };
 $scope.country = ['Australia', 'India', 'Germany', 'China', 'Canada', 'United Kingdom'];
 $scope.fullData = [{
  name: 'ABC',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'DEF',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'ABC',
  countryName: 'United Kingdom',
  city: 'London'
 }, {
  name: 'ABC',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'DEF',
  countryName: 'Canada',
  city: 'Toronto'
 }, {
  name: 'DEF',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'BCD',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Canada',
  city: 'Toronto'
 }];
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container">
  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
      <div class="col-md-3">
        <label>Search Keyword:</label>
        <input type="text" class="form-control" ng-model="my.$"/>
      </div>
      <div class="col-md-3">
        <label>Country:</label>
        <select class="form-control" ng-model="my.countryName" ng-options="countryName as countryName for countryName in country">
          <option value="" selected>Select a country</option>
        </select>
      </div>
      <div class="col-md-3">
        <label>City</label>
        <select class="form-control" ng-model="my.city"  ng-options="key as key for (key, value) in loc">
          <option value="" selected>Select a city</option>
        </select>
      </div>
    </div>
    <hr />
    <div class="row">
      <table class="table table-bordered">
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
        </tr>
        <tr ng-repeat="item in fullData | filter: my">
          <td>{{item.name}}</td>
          <td>{{item.countryName}}</td>
          <td>{{item.city}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>