AngularJS if-Anweisung mit ng-repeat

Question

Ich habe Probleme, ein If neben einer Wiederholungsanweisung zu verwenden.

Ich bin Abfragen von Daten, wie folgt:

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" 

Also, wenn das Modul eine Art von Bild hat, möchte ich das Bild bekommen. Wenn es Typ eingebettet hat, möchte ich den Iframe erhalten. Mein aktueller Ansichtscode ist:

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

Es funktioniert gut, wenn ich ng-if herausnehme. Konsole gibt den folgenden Fehler:

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

Answer 1

Sie können Filter anstelle von ngIf verwenden. Ihr Code soll wie sein:

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

Und es soll funktionieren.

Die Lösung, die Sie in Ihrem Code versuchen möchten, kann nicht als ngIf und ngRepeat ausgeführt werden. Beide versuchen, einige Elemente zu entfernen und zu ersetzen und einige Transklusionen vorzunehmen.

prüfen dieses Problem https://github.com/angular/angular.js/issues/4398

Überprüfen Sie auch die Verwendung von Filtern https://docs.angularjs.org/tutorial/step_09

und diese Frage wird bei der Verwendung von ngRepeat mit Filtern ng-repeat :filter by single field

Answer 2

Sie nicht ng-repeat und ng-if auf demselben Element verwenden können, weil sie beide wollen die Dinge zu tun, wie & das gesamte Element ersetzen entfernen. Diese Art von Sinn macht - was würdest du tun, wenn ng-repeat sagt "Hey, zieh das", aber ng-if sagt "Hey nein zeichne das nicht?"

Ich denke, die beste Lösung hier wäre, Ihr Array vorverarbeiten, um nur die Datensätze enthalten, die Sie wollen, und dann ng-repeat über das ohne ng-if. Sie könnten auch die ng-if in ein Element innerhalb des Elements ng-repeat verschieben, so dass es keine Unklarheit darüber gibt, was & versteckt angezeigt wird.

Answer 3

Dies liegt daran, dass Sie die if-Bedingung innerhalb des ng-repeat-Blocks ausführen müssen. Zum Beispiel:

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

    </label> 

Warum brauchen Sie die ng-if neben der ng-Wiederholung zu sein?

Answer 4

dies sollte nur angezeigt, „Artikel“ und „article1“ nützlich sein auf dem Bildschirm

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

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