CODEWITHSUNDEEP
javascriptangularjsif-statement
João Colucas
João Colucas

Reputation: 249

AngularJS if statement with ng-repeat

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

Upvotes: 14

Views: 46653

Answers (5)

Akaisteph7
Akaisteph7

Reputation: 6486

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>

Upvotes: 1

adio
adio

Reputation: 89

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>

Upvotes: 7

Kareem Elshahawy
Kareem Elshahawy

Reputation: 1421

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

Upvotes: 28

nsanglar
nsanglar

Reputation: 1742

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?

Upvotes: 11

Riley Lark
Riley Lark

Reputation: 20890

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.

Upvotes: 4

Related Questions