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

score 28 · Accepted Answer · edited May 23 '17 at 12:03

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

score 11 · Answer 2 · answered Oct 17 '14 at 11:37

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 '14 at 11:37

nsanglar

1,632
1
14
24

1

This probably should have been the selected answer according to your question. – user1012500 Oct 15 '15 at 10:19
There is one issue, this print empty label element! – Talk is Cheap Show me Code Mar 04 '22 at 12:55

score 7 · Answer 3 · answered Dec 23 '15 at 13:58

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 '15 at 13:58

adio

89
1
3

Has this actually been tested?.. – Akaisteph7 Mar 08 '23 at 15:22

score 4 · Answer 4 · answered Oct 17 '14 at 11:36

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.

score 1 · Answer 5 · answered Mar 08 '23 at 16:14

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>

AngularJS if statement with ng-repeat

5 Answers5