Ich möchte eine Bedingung in einer AngularJS-Vorlage ausführen. Ich rufe eine Videoliste von der Youtube-API ab. Einige der Videos haben ein Verhältnis von 16: 9 und andere ein Verhältnis von 4: 3.
Ich möchte eine Bedingung wie diese stellen:
if video.yt$aspectRatio equals widescreen then
element's attr height="270px"
else
element's attr height="360px"
Ich iteriere die Videos mit ng-repeat
. Ich habe keine Ahnung, was ich für diesen Zustand tun soll:
- Eine Funktion in den Bereich einfügen?
- Mach es in Vorlage?
if-statement
angularjs
vzhen
quelle
quelle
Antworten:
Angularjs (Versionen unter 1.1.5) bietet die
if/else
Funktionalität nicht. Im Folgenden finden Sie einige Optionen, die Sie berücksichtigen sollten, um das zu erreichen, was Sie erreichen möchten:( Wechseln Sie zum Update unten (Nr. 5), wenn Sie Version 1.1.5 oder höher verwenden. )
1. Ternärer Operator:
Wie von @Kirk in den Kommentaren vorgeschlagen, wäre der sauberste Weg, dies zu tun, die Verwendung eines ternären Operators wie folgt:
2.
ng-switch
Richtlinie:kann wie folgt verwendet werden.
3.
ng-hide
/ng-show
richtlinienAlternativ können Sie auch verwenden,
ng-show/ng-hide
aber wenn Sie dies verwenden, werden sowohl ein großes Video als auch ein kleines Videoelement gerendert und dann dasjenige ausgeblendet, das dieng-hide
Bedingung erfüllt , und dasjenige angezeigt, das die Bedingung erfülltng-show
. Auf jeder Seite werden also zwei verschiedene Elemente gerendert.4. Eine weitere zu berücksichtigende Option ist die
ng-class
Richtlinie.Dies kann wie folgt verwendet werden.
Das Obige fügt
large-video
dem div-Element grundsätzlich eine CSS-Klasse hinzu, wenn diesvideo.large
wahr ist.UPDATE: Angular 1.1.5 führte die
ngIf directive
5.
ng-if
Richtlinie:In den obigen Versionen
1.1.5
können Sie dieng-if
Direktive verwenden. Dies würde das Element entfernen, wenn der angegebene Ausdruck zurückgibt,false
und das Element erneutelement
in das DOM einfügen, wenn der Ausdruck zurückgibttrue
. Kann wie folgt verwendet werden.quelle
ng-switch on="video"
stattdessen seinng-switch-on="video"
<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>
ng-if
die eingeschlossenen Elemente NICHT zum DOM hinzugefügt werden, bis der Zustand imtrue
Gegensatz zung-hide
und ausgewertet wirdng-show
.ng-switch="video"
? Irgendein Problem? oder war es früher nicht verfügbar? Für mich funktioniert es ganz gutIn der neuesten Version von Angular (ab 1.1.5) wurde eine bedingte Direktive namens aufgerufen
ngIf
. Es unterscheidet sich vonngShow
undngHide
darin, dass die Elemente nicht ausgeblendet, aber überhaupt nicht im DOM enthalten sind. Sie sind sehr nützlich für Komponenten, deren Erstellung teuer ist, die aber nicht verwendet werden:quelle
ng-if
führt einen isolierter Umfang , so dass$parent
wird$parent.$parent
in dem Körperng-if
.Ternär ist der klarste Weg, dies zu tun.
quelle
Angular selbst bietet keine if / else-Funktionalität, aber Sie können sie erhalten, indem Sie dieses Modul einschließen:
https://github.com/zachsnow/ng-elif
In seinen eigenen Worten ist es nur "eine einfache Sammlung von Kontrollflussanweisungen: ng-if, ng-else-if und ng-else". Es ist einfach und intuitiv zu bedienen.
Beispiel:
quelle
ng-if="someCondition && someOtherCondition"
. Vielleicht verstehe ich falsch? (Ich habe dieses Modul geschrieben - es sollte genauso funktionieren wieif
undelse
in JS).Sie können Ihre
video.yt$aspectRatio
Eigenschaft direkt verwenden, indem Sie sie durch einen Filter übergeben und das Ergebnis an das Höhenattribut in Ihrer Vorlage binden.Ihr Filter würde ungefähr so aussehen:
Und die Vorlage wäre:
quelle
video.yt$aspectRatio
leer oder undefiniert ist? Ist es möglich, einen Standardwert anzuwenden?In diesem Fall möchten Sie einen Pixelwert in Abhängigkeit von einer Objekteigenschaft "berechnen".
Ich würde eine Funktion in der Steuerung definieren, die die Pixelwerte berechnet.
In der Steuerung:
Dann schreiben Sie einfach in Ihre Vorlage:
quelle
Ich bin damit einverstanden, dass ein Ternär extrem sauber ist. Scheint, dass es sehr situativ ist, obwohl ich als Teil Div oder P oder Tabelle anzeigen muss, also bevorzuge ich bei einer Tabelle aus offensichtlichen Gründen kein Ternär. Das Aufrufen einer Funktion ist normalerweise ideal, oder in meinem Fall habe ich Folgendes getan:
quelle
Sie können die ng-if-Direktive wie oben verwenden.
quelle
Eine Möglichkeit für Angular: Ich musste eine if - -Anweisung in den HTML-Teil aufnehmen und prüfen, ob alle Variablen einer von mir erstellten URL definiert sind. Ich habe es folgendermaßen gemacht und es scheint ein flexibler Ansatz zu sein. Ich hoffe es wird für jemanden hilfreich sein.
Der HTML-Teil in der Vorlage:
Und der Typoskript-Teil:
Danke und viele Grüße,
Jan.
quelle
ng If else-Anweisung
quelle