AngularJS if statement with ng-repeat

Question

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

Community · Accepted Answer · 2017-05-23 12:03:04Z

28

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

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Oct 17, 2014 at 12:15

Kareem Elshahawy

1,4211 gold badge12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nsanglar · Accepted Answer · 2014-10-17 11:37:40Z

11

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

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

answered Oct 17, 2014 at 11:37

nsanglar

1,7421 gold badge14 silver badges24 bronze badges

2 Comments

user1012500 Over a year ago

This probably should have been the selected answer according to your question.

Talk is Cheap Show me Code Over a year ago

There is one issue, this print empty label element!

adio · Accepted Answer · 2015-12-23 13:58:40Z

7

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

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

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

answered Dec 23, 2015 at 13:58

adio

891 silver badge3 bronze badges

1 Comment

Akaisteph7 Over a year ago

Has this actually been tested?..

Riley Lark · Accepted Answer · 2014-10-17 11:36:14Z

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?"

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.

answered Oct 17, 2014 at 11:36

Riley Lark

20.9k15 gold badges86 silver badges130 bronze badges

Comments

Akaisteph7 · Accepted Answer · 2023-03-08 16:14:52Z

1

You can also just use ngHide or ngShow to dynamically show and hide elements based on a certain criteria.

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

answered Mar 8, 2023 at 16:14

Akaisteph7

6,9222 gold badges39 silver badges53 bronze badges

Collectives™ on Stack Overflow

AngularJS if statement with ng-repeat

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related