it-swarm.com.de

if else-Anweisung in AngularJS-Vorlagen

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

if video.yt$aspectRatio equals widescreen then 
    element's attr height="270px"
else
    element's attr height="360px"

Ich durchlaufe die Videos mit ng-repeat. Habe keine Ahnung, was ich bei dieser Erkrankung tun soll:

  • Eine Funktion in den Gültigkeitsbereich einfügen?
  • Mach es in Vorlage?
684
vzhen

Angularjs (Versionen unter 1.1.5) bietet nicht die Funktion if/else. Im Folgenden finden Sie einige Optionen, die Sie berücksichtigen sollten, um das zu erreichen, was Sie erreichen möchten:

( Springe zum Update unten (# 5), wenn du Version 1.1.5 oder höher verwendest )

1. Ternärer Betreiber:

Wie von @Kirk in den Kommentaren vorgeschlagen, ist es am einfachsten, einen ternären Operator wie folgt zu verwenden:

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

2. ng-switch Anweisung:

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

Alternativ können Sie auch ng-show/ng-hide verwenden. Mit dieser Option werden jedoch sowohl ein großes als auch ein kleines Videoelement gerendert. Anschließend wird das Element, das die Bedingung ng-hide erfüllt, ausgeblendet und das Element angezeigt, das die Bedingung ng-show erfüllt. Auf jeder Seite werden also zwei verschiedene Elemente gerendert.

4. Eine weitere zu berücksichtigende Option ist die Anweisung ng-class .

Dies kann wie folgt verwendet werden.

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

Das oben Gesagte fügt dem div-Element im Grunde genommen eine CSS-Klasse large-video hinzu, wenn video.large der Wahrheit entspricht.

UPDATE: Angular 1.1.5 hat den ngIf directive eingeführt

5. ng-if Anweisung:

In den obigen Versionen von 1.1.5 können Sie die Anweisung ng-if verwenden. Dies würde das Element entfernen, wenn der angegebene Ausdruck false zurückgibt, und das element erneut in das DOM einfügen, wenn der Ausdruck true zurückgibt. 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>
1259
Amyth

In der neuesten Version von Angular (ab 1.1.5) wurde eine bedingte Direktive namens ngIf eingefügt. Es unterscheidet sich von ngShow und ngHide darin, dass die Elemente nicht ausgeblendet, aber überhaupt nicht im DOM enthalten sind. Sie sind sehr nützlich für Komponenten, deren Erstellung kostspielig ist, die jedoch 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>
172
Brian Genisio

Ternary ist der klarste Weg, dies zu tun.

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

Angular selbst bietet keine if/else-Funktionalität, aber Sie können es mit dem folgenden Modul erhalten:

https://github.com/zachsnow/ng-Elif

In seinen eigenen Worten ist es nur "eine einfache Sammlung von Kontrollfluss-Direktiven: ng-if, ng-else-if und ng-else". Es ist einfach und intuitiv zu bedienen.

Beispiel:

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

Sie können Ihre video.yt$aspectRatio -Eigenschaft direkt verwenden, indem Sie sie durch einen Filter führen und das Ergebnis an das height-Attribut in Ihrer Vorlage binden.

Ihr Filter würde ungefähr so ​​aussehen:

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

Und die Vorlage wäre:

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

In diesem Fall möchten Sie einen Pixelwert in Abhängigkeit von einer Objekteigenschaft "berechnen".

Ich würde eine Funktion im Controller definieren, die die Pixelwerte berechnet.

In der Steuerung:


$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

Dann schreiben Sie in Ihre Vorlage einfach:


element height="{{ GetHeight(aspect) }}px "

10
Spock

Ich stimme zu, dass ein Ternär extrem sauber ist. Scheint, dass es sehr situativ ist, obwohl ich div oder p oder table anzeigen muss, also bevorzuge ich bei einer Tabelle aus offensichtlichen Gründen keine Ternäre. Das Aufrufen einer Funktion ist normalerweise ideal, oder in meinem Fall habe ich Folgendes getan:

<div ng-controller="TopNavCtrl">
        <div ng-if="info.Host ==='servername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
       <div ng-if="info.Host ==='otherservername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
</div>
8
Tom Stickel
    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

sie können die ng-if-Direktive wie oben verwenden.

3
JBhardwaj

Eine Möglichkeit für Angular: Ich musste eine if-Anweisung in den HTML-Teil einfügen, ich musste überprüfen, ob alle Variablen einer URL, die ich produziere, definiert sind. Ich habe es folgendermaßen gemacht und es scheint ein flexibler Ansatz zu sein. Ich hoffe es wird jemandem weiterhelfen.

Der HTML-Teil in der Vorlage:

    <div  *ngFor="let p of poemsInGrid; let i = index" >
        <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
    </div>

Und der TypeScript-Teil:

  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

Danke und viele Grüße,

Jan