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

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

Ich würde eine Funktion in der Steuerung definieren, die die Pixelwerte berechnet.

Im Controller:

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

Dann schreiben Sie einfach in Ihre Vorlage:

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

Answer 2

Ich stimme zu, dass ein ternär ist extrem sauber. Scheint, dass es sehr situationsabhängig ist, obwohl als einige Dinge, die ich brauche, um div oder p oder Tabelle anzuzeigen, so mit einer Tabelle, die ich nicht bevorzugen eine ternäre aus offensichtlichen Gründen. Ein Aufruf an eine Funktion ist in der Regel ideal oder in meinem Fall habe ich dies 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>

Answer 3

    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

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

Answer 4

Eine Möglichkeit für Angular: Ich musste eine if - Anweisung in den html-Teil einbauen, ich musste prüfen, ob alle Variablen einer URL, die ich produziere, definiert sind. Ich habe es auf folgende Weise gemacht und es scheint ein flexibler Ansatz zu sein. Ich hoffe, dass es für jemanden hilfreich sein wird.

Der HTML-Teil der Vorlage:

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

Und der Teil mit der Schreibmaschine:

  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';
      }
  }

Vielen Dank und herzliche Grüße,

Jan

Answer 5

Ng If else-Anweisung

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