带有 ng-repeat 的 AngularJS if 语句答案

【问题标题】：AngularJS if statement with ng-repeat带有 ng-repeat 的 AngularJS if 语句
【发布时间】：2014-12-12 23:36:14
【问题描述】：

我在尝试在重复语句旁边使用 if 时遇到问题。

我在取数据，如下：

modules: Array[1]
    0: Object
        embed: "<iframe width="600" height="338" src="https://www.youtube.com/embed/UqdDAn4_iY0"
               frameborder="0" allowfullscreen="" style="margin:0px auto;display:block;"></iframe>"
        type: "embed"
    1: Object
        src: "https://m1.behance.net/rendition/modules/127899607/disp/072cebf2137c78359d66922ef9b96adb.jpg"
        type: "image"

所以，如果模块有图像类型，我想获取图像。如果它具有嵌入类型，我想获取 iframe。我当前的视图代码是：

<div ng-repeat="project in project.modules" ng-if="project.type == 'image'">
    <img src="{{ project.src }}"  class="img-responsive img-centered" alt="{{ project.name }}"/>
</div>

如果我取出 ng-if，效果会很好。控制台输出如下错误：

Error: Multiple directives [ngRepeat, ngIf] asking for transclusion on: <!-- ngRepeat: project in project.modules -->

【问题讨论】：

标签： javascript angularjs if-statement

【解决方案1】：

您不能在同一个元素上使用ng-repeat 和ng-if，因为它们都想做诸如删除和替换整个元素之类的事情。这是有道理的——当ng-repeat 说“嘿，画这个”但ng-if 说“嘿，不，不要画这个？”时，你会怎么做？

我认为这里最好的解决方案是预处理您的数组以仅包含您想要的记录，然后 ng-repeat 不包含 ng-if。您还可以将 ng-if 移动到 ng-repeat 元素内的元素中，这样显示和隐藏的内容就不会产生歧义。

【讨论】：

【解决方案2】：

这是因为您必须在 ng-repeat 块中执行 if 条件。例如：

   <label ng-repeat="elem in list">
     <div ng-if="...">
         show something for this condition
     </div>

  </label>

为什么需要 ng-if 与 ng-repeat 并排？

【讨论】：

根据您的问题，这可能应该是选择的答案。

【解决方案3】：

您可以使用过滤器而不是使用 ngIf。你的代码应该是这样的：

<div ng-repeat="project in project.modules | filter: { type: 'image' }">

它会起作用的。

您尝试在代码中执行的解决方案无法完成，因为 ngIf 和 ngRepeat 都尝试删除和替换某些元素并进行一些嵌入。

查看这个问题https://github.com/angular/angular.js/issues/4398

还要检查过滤器https://docs.angularjs.org/tutorial/step_09的使用情况

这个问题在使用带有过滤器ng-repeat :filter by single field的ngRepeat时会很有用

【讨论】：

【解决方案4】：

这应该只在屏幕上显示“article”和“article1”

<li ng-repeat="value in values" ng-if="value.name == 'article' || value.name == 'article1'">

<label>{{value.name}}</label>

【讨论】：