AngularJS if语句带有ng-repeat

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是有用的:按单个字段过滤

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>