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

Angularjs (Versionen unter 1.1.5) bietet die if/elseFunktionalitä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:

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

2. ng-switchRichtlinie:

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

Alternativ können Sie auch verwenden, ng-show/ng-hideaber wenn Sie dies verwenden, werden sowohl ein großes Video als auch ein kleines Videoelement gerendert und dann dasjenige ausgeblendet, das die ng-hideBedingung erfüllt , und dasjenige angezeigt, das die Bedingung erfüllt ng-show. Auf jeder Seite werden also zwei verschiedene Elemente gerendert.

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

Dies kann wie folgt verwendet werden.

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

Das Obige fügt large-videodem div-Element grundsätzlich eine CSS-Klasse hinzu, wenn dies video.largewahr ist.

UPDATE: Angular 1.1.5 führte diengIf directive

5. ng-ifRichtlinie:

In den obigen Versionen 1.1.5können Sie die ng-ifDirektive verwenden. Dies würde das Element entfernen, wenn der angegebene Ausdruck zurückgibt, falseund das Element erneut elementin das DOM einfügen, wenn der Ausdruck zurückgibt 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>

In der neuesten Version von Angular (ab 1.1.5) wurde eine bedingte Direktive namens aufgerufen ngIf. Es unterscheidet sich von ngShowund ngHidedarin, 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:

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

Ternär ist der klarste Weg, dies zu tun.

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

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:

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

Sie können Ihre video.yt$aspectRatioEigenschaft 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:

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>

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:

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

Dann schreiben Sie einfach in Ihre Vorlage:

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

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:

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

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

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:

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

Und der Typoskript-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.

ng If else-Anweisung

ng-if="receiptData.cart == undefined ? close(): '' ;"