if else-Anweisung in AngularJS-Templates

Question

Ich möchte eine Bedingung in einer AngularJS-Vorlage zu tun. Ich hole eine Videoliste von der Youtube-API. Einige der Videos sind im Verhältnis 16:9 und einige sind im Verhältnis 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 . Habe keine Ahnung, was ich gegen diesen Zustand tun soll:

• Eine Funktion im Anwendungsbereich hinzufügen?
• In der Vorlage machen?

Answer 1

Angularjs (Versionen unter 1.1.5) bietet nicht die if/else Funktionalität. Nachfolgend finden Sie einige Optionen, die Sie für Ihre Ziele in Betracht ziehen sollten:

( Springen Sie zum folgenden Update (#5), wenn Sie Version 1.1.5 oder höher verwenden )

1. Ternärer Operator:

Wie von @Kirk in den Kommentaren vorgeschlagen, wäre die sauberste Art, dies zu tun, die Verwendung eines ternären Operators wie folgt:

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2. ng-switch Richtlinie:

kann etwa wie folgt verwendet werden.

<div ng-switch on="video">
    <div ng-switch-when="video.large">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

3. ng-hide / ng-show Direktiven

Alternativ dazu können Sie auch ng-show/ng-hide aber damit werden sowohl ein großes als auch ein kleines Videoelement gerendert und dann dasjenige ausgeblendet, das die ng-hide Bedingung und zeigt diejenige, die die ng-show Zustand. Auf jeder Seite werden Sie also zwei verschiedene Elemente darstellen.

4. Eine weitere Option, die in Betracht zu ziehen ist ng-class Richtlinie.

Dies kann wie folgt verwendet werden.

<div ng-class="{large-video: video.large}">
    <!-- video block goes here -->
</div>

Die obigen Ausführungen fügen grundsätzlich eine large-video css-Klasse für das div-Element, wenn video.large ist wahrheitsgemäß.

UPDATE: Angular 1.1.5 führte die ngIf directive

5. ng-if Richtlinie:

In den oben genannten Versionen 1.1.5 können Sie die ng-if Richtlinie. Dadurch wird das Element entfernt, wenn der angegebene Ausdruck false und fügt wieder die element im DOM, wenn der Ausdruck true . Kann wie folgt verwendet werden.

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

Answer 2

In der neuesten Version von Angular (ab 1.1.5) gibt es eine bedingte Direktive namens ngIf . Es ist anders als ngShow y ngHide dass die Elemente nicht ausgeblendet werden, sondern überhaupt nicht im DOM enthalten sind. Sie sind sehr nützlich für Komponenten, die aufwändig zu erstellen sind, aber nicht verwendet werden:

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

Answer 3

Die Ternärform ist die eindeutigste Art, dies zu tun.

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>

Answer 4

Angular selbst bietet keine if/else-Funktionalität, aber Sie können sie durch Einbindung dieses Moduls erhalten:

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.

Exemple :

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>

Answer 5

Sie könnten Ihre video.yt$aspectRatio Eigenschaft direkt, indem Sie sie durch einen Filter leiten und das Ergebnis an das Attribut height in Ihrer Vorlage binden.

Ihr Filter würde etwa so aussehen:

app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

Und die Vorlage würde lauten:

<video height={{video.yt$aspectRatio | videoHeight}}></video>