選択ボックスでの選択に基づいてテーブルに結果を表示するフィルターを作成しようとしています。
また、デフォルトでは、「都市」選択ボックスは、私がつかんで設定しているユーザーの場所を設定します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>
この場合、cityという名前のプロパティである空のオブジェクトに適用されたフィルターですが、フィルターが適用されたオブジェクトのすべてのプロパティは、最初に空の値を持つ必要があります。
コントローラでオブジェクトを初期化する必要があります
$scope.my={$:'',countryName:'',city:''};
ng-initcityプロパティを削除します
フォローしてみてください
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加