1
선택 상자의 선택 사항에 따라 표에 결과를 표시하는 필터를 작성하려고합니다.선택 상자에 일치하는 항목이없는 경우 필터를 재설정하십시오.
또한 기본적으로 '도시'선택 상자에는 사용자 위치를 설정하고 ng-init="my.city='${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>