1
選択ボックスの選択に基づいてテーブルに結果を表示するフィルタを作成しようとしています。選択ボックスに一致するものが見つからない場合は、フィルタをリセットします。
また、デフォルトでは、「都市」選択ボックスには、私がつかんでいるユーザーの場所が設定され、に設定されます。したがって、デフォルトの結果はユーザーの場所に基づいてフィルタリングされます。
私の唯一の問題は、ユーザーの場所が[City]選択ボックスのいずれの値とも一致しない場合にリセットする必要があることです。 「都市を選択」オプションを選択する必要があり、フィルタを適用せずにすべての結果が表示されます。
私のコードで都市のいずれかを選択してから[都市を選択]を選択しようとすると、フィルタがリセットされません。
これを修正するにはどうすればよいですか？
はここで完全なコードです：プロパティという名前の都市だった空のオブジェクトにapliedこの場合、フィルタで
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>