使用ng-repeat的AngularJS if语句

I'm having trouble trying to use an if alongside a repeat statement.

我在使用if语句时遇到了麻烦。

I'm fetching data, as follows:

我正在获取数据，如下所示:

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"

So, if the module has a type of image, i want to get the image. If it has type embed, i want to get the iframe. My current view code is:

如果模块有一种图像，我想要得到图像。如果它有嵌入类型，我想获得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>

It works well if i take out ng-if. Console outputs the following error:

如果我去掉ng-if，效果会很好。控制台输出以下错误:

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

4 个解决方案

#1

You can use filter instead of using ngIf. Your code shall be like:

您可以使用过滤器，而不是使用ngIf。您的代码应该如下:

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

And it shall work.

和它的工作。

The solution you're trying to do in your code can't be done as ngIf and ngRepeat both trying to remove and replace some elements and do some transclusion.

您试图在代码中实现的解决方案不能作为ngIf和ngRepeat都试图删除和替换某些元素并进行一些转换。

Check this issue https://github.com/angular/angular.js/issues/4398

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

Also check the usage of filters https://docs.angularjs.org/tutorial/step_09

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

and this question shall be useful with using ngRepeat with filters ng-repeat :filter by single field

这个问题对于使用ngRepeat与过滤器ng-repeat:filter by single field很有用

#2

This is because you have to do the if condition inside the ng-repeat block. For example:

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

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

  </label>

Why do you need the ng-if to be alongside the ng-repeat?

为什么你需要ng-如果和ng-repeat一起?

#3

this should display only "article" and "article1" on screen

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

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

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

#4

You can't use ng-repeat and ng-if on the same element, because both of them want to do things like remove & replace the entire element. This kind of makes sense - what would you do when ng-repeat is saying "hey draw this" but ng-if is saying "hey no don't draw this?"

您不能在同一个元素上使用ng-repeat和ng-if，因为它们都想删除和替换整个元素。这是有道理的，当ng-repeat说"嘿，画这个"而nif说"嘿，不，别画这个"时你会怎么做?

I think the best solution here would be to preprocess your array to only include the records you want, and then ng-repeat over that with no ng-if. You could also move the ng-if to an element inside the ng-repeat element, so that there is no ambiguity about what's shown & hidden.

我认为最好的解决方案是对数组进行预处理，只包含您想要的记录，然后在没有ng-if的情况下进行ng-repeat。您还可以将ng-if移动到ng-repeat元素中的一个元素中，这样就不会对所显示和隐藏的内容产生歧义。

#1