Javascript AngularJS-在ng repeat上筛选，隐藏列标题

我有一个来自REST服务的大量JSON响应，该服务包含世界上许多城市。。。结构是这样的（这里只是一个示例…它通常由100-200个位置组成，来自一个服务-为了更好地理解，我刚刚将其设置为$scope项）：

现在，在我的界面上，我希望这样分组：

- Country
  ---- City
  ---- City
  ---- City
- Country
  ---- City
  ---- City
  ---- City

我还希望使用输入字段过滤重复，因此我的界面上有以下输入和

ng repeat

s：

<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>

{{c.country}
{{d.name}

这是伟大的作品，但c.country标题始终显示，无论过滤器。。。当

cityFilter

过滤器包含一个在该国家/地区不适用/找不到的城市名称时，我应该如何更改我的HTML/指令以使

c.country

消失

---

提前感谢。

将国家围成一个跨度，然后使用ng show

<input type="text" ng-model="cityFilter">
<div class="row">
    <div class="col-xs-12" ng-repeat="c in cityData | filter: c.country">
        <span ng-show="(c.cities | filter: cityFilter).length > 0">{{ c.country }}</span>

       <div class="col-xs-12" ng-repeat="d in c.cities | filter: cityFilter">
          {{ d.name }}
       </div>
    </div>
</div>

{{c.country}
{{d.name}

<input type="text" ng-model="cityFilter">
<div class="row">
    <div class="col-xs-12" ng-repeat="c in cityData | filter: c.country">
        <span ng-show="(c.cities | filter: cityFilter).length > 0">{{ c.country }}</span>

       <div class="col-xs-12" ng-repeat="d in c.cities | filter: cityFilter">
          {{ d.name }}
       </div>
    </div>
</div>