Сбросить фильтр, если совпадение не найдено в поле выбора

Question

Я пытаюсь создать фильтр, который будет отображать результаты в таблице на основе выбора в поле выбора.

Кроме того, по умолчанию в поле выбора "Город" будет указано местоположение пользователя, которое я беру и настраиваю. ng-init="my.city='${city}'", Таким образом, результаты по умолчанию будут отфильтрованы на основе местоположения пользователя.

Единственная проблема, с которой я сталкиваюсь, - когда местоположение пользователя не соответствует ни одному из значений в моем поле выбора "Город", оно должно быть сброшено. то есть опция "Выберите город" должна быть выбрана, и все результаты будут показаны без применения фильтра.

В моем коде, если я выбираю какой-либо город, а затем пытаюсь выбрать "Выбрать город", фильтр не сбрасывается ".

Как это исправить?

Вот полный код:

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

В этом случае фильтр применяется в пустом объекте, который был свойством с именем city, но все свойство объекта, к которому применен фильтр, должно сначала иметь пустое значение.

Вы должны инициализировать свой объект в вашем контроллере

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

и удалите собственность города ng-init

попробуйте следующее

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>