Question

我收到来自REST服务的大量JSON响应，其中包含世界上许多城市......结构就像这样（这里只是一个样本......它通常包含100-200个地方并且来自一项服务 - 我刚将其设置为$ scope项目以便更好地理解）：

$scope.cityData = [
            {
                "country": "Deutschland",
                "cities": [
                    {
                        "id": 1,
                        "name": "Berlin",
                        "country": "Deutschland",
                        "browserUrl": "berlin",
                        "clusterId": null
                    },
                    {
                        "id": 2,
                        "name": "Hamburg",
                        "country": "Deutschland",
                        "browserUrl": "hamburg",
                        "clusterId": null
                    },
                    {
                        "id": 3,
                        "name": "München",
                        "country": "Deutschland",
                        "browserUrl": "muenchen",
                        "clusterId": null
                    },
                    {
                        "id": 4,
                        "name": "Köln",
                        "country": "Deutschland",
                        "browserUrl": "koeln",
                        "clusterId": null
                    }
                ]
            },
            {
                "country": "Schweiz",
                "cities": [
                    {
                        "id": 15,
                        "name": "Zürich",
                        "country": "Schweiz",
                        "browserUrl": "zuerich",
                        "clusterId": null
                    },
                    {
                        "id": 16,
                        "name": "Geneva",
                        "country": "Schweiz",
                        "browserUrl": "geneva",
                        "clusterId": null
                    }
                ]
            },
            {
                "country": "Österreich",
                "cities": [
                    {
                        "id": 19,
                        "name": "Vienna",
                        "country": "Österreich",
                        "browserUrl": "vienna",
                        "clusterId": null
                    },
                    {
                        "id": 20,
                        "name": "Graz",
                        "country": "Österreich",
                        "browserUrl": "graz",
                        "clusterId": null
                    },
                    {
                        "id": 20,
                        "name": "Linz",
                        "country": "Österreich",
                        "browserUrl": "linz",
                        "clusterId": null
                    }

                ]
            }
        ];

现在在我的界面上，我希望将它们分组：

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

我还想使用输入字段过滤重复，所以我的界面上有以下输入和ng-repeat：

<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标题...当c.country过滤器包含城市时，我应该如何更改我的HTML /指令以使cityFilter消失在该国家/地区不适用/找不到的名称？

提前致谢。

Answer 1

将国家/地区封闭并使用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>

AngularJS - 过滤ng-repeat，隐藏列标题

1 个答案: