AngularJS：ng-repeat、ng-if 和 JSON答案

【问题标题】：AngularJS: ng-repeat, ng-if & JSONAngularJS：ng-repeat、ng-if 和 JSON
【发布时间】：2015-08-24 18:13:46
【问题描述】：

我无法弄清楚如何将 ng-repeat 和 ng-if 与 JSON 一起使用。我希望 bar1 集群与 bar2 集群显示在同一行（如果它们具有相同的名称）。

JSON 看起来像这样：

{
    "bar1" {
        "name": "bar1"
        "clusters": {
            "1": {
                "name": "Cluster 1"
            }
            ...
        }
    }
    "bar2" {
        "name": "bar2"
        "clusters": {
            ...
        }
    }
}

现在我有一个糟糕的解决方案，我将ng-repeat 嵌套在bar2 内部ng-repeat 用于bar1。正在显示正确的集群，但不幸的是，这仍然会为在 bar2 中循环的所有集群生成 HTML。至少，我不希望生成额外的 HTML。

角度

<div ng-repeat="(bar1clusterKey, bar1clusterValue) in blah.bar1.clusters">
    <div>bar1 content</div>
    <div ng-repeat="(bar2clusterKey, bar2clusterValue) in blah.bar2.clusters">
        <div ng-if="bar1clusterValue.name == bar2clusterValue.name">
            <div>bar2 content on the same line as bar1</div>
        </div>
    </div>
</div>

bar1 集群比 bar2 集群多，bar2 是 bar1 的子集，因此没有任何唯一的 bar2 集群名称。

我有几个问题：有什么方法可以在不使用ng-repeat 生成额外 HTML 的情况下实现我想要的结果？我什至使用了合理的嵌套结构吗？我可以通过使用服务来解决这个问题（我什至还没有编写 Angular 服务）？

编辑：这是一个Plunk 来说明我在说什么。

【问题讨论】：

您似乎正在尝试在 html 中组织数据。一个更好的方法是在你的控制器中按照你喜欢的方式组织它，然后有一个简单的 html 模板来显示它。

标签： html json angularjs dom

【解决方案1】：

您可以尝试使用角度 filter 来避免 ng-if

<div ng-repeat="(bar1clusterKey, bar1clusterValue) in blah.bar1.clusters">
    <div>bar1 content</div>
    <div ng-repeat="bar2 in blah.bar2.clusters| filter: {name: bar2clusterValue.name}">
         <div>bar2 content on the same line as bar1</div>
    </div>
</div>

【讨论】：

我已经尝试过至少 7 种不同的方式使用过滤器，但都没有奏效。 :(
我也试过了，没有运气。也许这是我的 JSON 的问题......我不知道。如果我找到解决方案，我一定会发布它。感谢过滤器的想法。我会继续走这条路。
@UltraSonja 你能创建 plunkr..那么这将是很好的进一步深入研究
我明天可以做到。我今天要解决一个更紧迫的问题。
显然您不能过滤 Angular 中的对象，只能过滤数组。我收到了这个错误：Error: [filter:notarray]，这导致我看到了这个github 和this documentation。

【解决方案2】：

如果您输入ng-if on the same element as the ng-repeat，则为所有与if 不匹配的项目生成的HTML 将被其外观注释掉，这并不完全理想，但它可以完成工作.也许remove() 可以通过某种方式传入其中，但我没有任何运气。

The final Plunk 和关键的 HTML sn-p:

<div class="flex-container" ng-repeat="(bar2clusterKey, bar2clusterValue) in
blah.bar2.clusters" ng-if="bar1clusterValue.name == bar2clusterValue.name">

【讨论】：