I received an extensive JSON response from a REST service with information on numerous cities worldwide. The data structure is as follows (this is just a sample - typically it includes 100-200 places retrieved from the service and stored in the $scope item for easier comprehension):
$scope.cityData = [
{
"country": "Germany",
"cities": [
{
"id": 1,
"name": "Berlin",
"country": "Germany",
"browserUrl": "berlin",
"clusterId": null
},
{
"id": 2,
"name": "Hamburg",
"country": "Germany",
"browserUrl": "hamburg",
"clusterId": null
},
{
"id": 3,
"name": "Munich",
"country": "Germany",
"browserUrl": "munich",
"clusterId": null
},
{
"id": 4,
"name": "Cologne",
"country": "Germany",
"browserUrl": "cologne",
"clusterId": null
}
]
},
{
"country": "Switzerland",
"cities": [
{
"id": 15,
"name": "Zurich",
"country": "Switzerland",
"browserUrl": "zurich",
"clusterId": null
},
{
"id": 16,
"name": "Geneva",
"country": "Switzerland",
"browserUrl": "geneva",
"clusterId": null
}
]
},
{
"country": "Austria",
"cities": [
{
"id": 19,
"name": "Vienna",
"country": "Austria",
"browserUrl": "vienna",
"clusterId": null
},
{
"id": 20,
"name": "Graz",
"country": "Austria",
"browserUrl": "graz",
"clusterId": null
},
{
"id": 20,
"name": "Linz",
"country": "Austria",
"browserUrl": "linz",
"clusterId": null
}
]
}
];
Now, I aim to group this data on my interface in the following manner:
- Country
---- City
---- City
---- City
- Country
---- City
---- City
---- City
Additionally, I want to filter the display using an input field, so I have included the input and ng-repeat directives in my interface:
<input type="text" ng-model="cityFilter">
<div class="row">
<div class="col-xs-12" ng-repeat="c in cityData | filter: c.country">
{{ c.country }}
<div class="col-xs-12" ng-repeat="d in c.cities | filter: cityFilter">
{{ d.name }}
</div>
</div>
</div>
This setup works well, but the c.country title always appears regardless of the applied filter. How can I modify my HTML/directives so that the c.country disappears when the cityFilter does not match any city names within that country?
Appreciate your help.