Question

我在尝试使用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 -->

Answer 1

您可以使用过滤器而不是使用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

的使用情况

这个问题对于将ngRepeat与过滤器ng-repeat :filter by single field

一起使用非常有用

Answer 2

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

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

  </label>

为什么你需要ng-if和ng-repeat一起使用？

Answer 3

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

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

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

Answer 4

你不能在同一个元素上使用ng-repeat和ng-if，因为他们都想要做一些事情，比如删除＆amp;替换整个元素。这种情况有道理 - 当ng-repeat说“嘿得出这个”时你会做什么，但是ng-if说“嘿，不要画这个？”

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

AngularJS if语句带有ng-repeat

4 个答案: