AngularJS if statement with ng-repeat

Issue

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

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:

<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:

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

Solution

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

<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.

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

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

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

Answered By - Kareem Elshahawy