if else-Anweisung in AngularJS-Vorlagen

702

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?
vzhen
quelle
2
Ich habe hier einen ng-if-Artikel gefunden. goo.gl/wQ30uf
virender

Antworten:

1284

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>
Ein Mythos
quelle
9
Es sollte ng-switch on="video"stattdessen seinng-switch-on="video"
czerasz
4
Wie geht das if () {} else if () {} else if () {} else {} Aber
füge
208
Auch ternär<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>
Kirk Strobeck
16
Beachten Sie, dass ng-ifdie eingeschlossenen Elemente NICHT zum DOM hinzugefügt werden, bis der Zustand im trueGegensatz zu ng-hideund ausgewertet wird ng-show.
Wilhelm Murdoch
1
Warum nicht einfach ng-switch="video"? Irgendein Problem? oder war es früher nicht verfügbar? Für mich funktioniert es ganz gut
Sami
175

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>
Brian Genisio
quelle
5
Beachten Sie, dass ng-ifführt einen isolierter Umfang , so dass $parentwird $parent.$parentin dem Körper ng-if.
David Salamon
142

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

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
Oliver Dixon
quelle
Ho dies mit 2 Bedingung in oder zu tun? wie <div> {{A == B || A == C? 'varIsTrue': 'varIsFalse'}} </ div>
YoBre
2
Wickeln Sie es ein (A == B || A == C)
Oliver Dixon
1
liebe diese Antwort! Die Verwendung von ng-Direktiven gibt viele HTML-Leerzeichen, wenn ein div die Bedingung nicht erfüllt.
sksallaj
48

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>
lpappone
quelle
1
Ich möchte den Code in Div nicht immer wieder wiederholen.
1
Sie müssen nichts wiederholen - Sie könnten es genauso einfach tun ng-if="someCondition && someOtherCondition". Vielleicht verstehe ich falsch? (Ich habe dieses Modul geschrieben - es sollte genauso funktionieren wie ifund elsein JS).
Zach Snow
1
Dies ist ein absoluter Lebensretter. Dies sollte Teil des Angular-Kerns sein, es ist für die Vorlagencodierung unverzichtbar. Viel sauberer als überall mit ternären Operatoren und überwindet die Einschränkungen, dass ng-switch keine Ausdrücke auswerten kann.
Nico Westerdale
Danke @NicoWesterdale! Außerdem habe ich eine reichhaltigere Version von ng-switch hinzugefügt, die Sie vielleicht nützlich finden: github.com/zachsnow/ng-cases
Zach Snow
30

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>
Noah Freitas
quelle
Wie wäre es mit Ihrem Code, wenn er video.yt$aspectRatioleer oder undefiniert ist? Ist es möglich, einen Standardwert anzuwenden?
Fractaliste
13

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 "
Spock
quelle
11

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>
Tom Stickel
quelle
4
    <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.

JBhardwaj
quelle
3

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.

Jan Clemens Stoffregen
quelle
2
Sieht eher nach Angular als nach AngularJS aus.
Pzaenger
@pzaenger, ja, aber viele Antworten auf diese Frage funktionieren für beide, daher denke ich, dass einige Leute, wie ich, die Antworten trotzdem anschauen. Bitte lassen Sie mich wissen, wenn es Ihnen etwas ausmacht.
Jan Clemens Stoffregen
2
Gut. Zumindest sollten Sie dies in Ihrer Antwort erwähnen.
Pzaenger
@pzaenger, danke für diesen Hinweis, ich habe ihn jetzt erwähnt.
Jan Clemens Stoffregen
1

ng If else-Anweisung

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