if else istruzione nei modelli AngularJS

Voglio fare una condizione in un modello AngularJS. Ricevo un elenco di video dall'API di Youtube. Alcuni video sono in formato 16: 9 e altri in formato 4: 3.

Voglio creare una condizione come questa:

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

Sto iterando i video usando ng-repeat. Non ho idea di cosa dovrei fare per questa condizione:

• Aggiungere una funzione nell'ambito?
• Farlo nel modello?

Angularjs (versioni precedenti alla 1.1.5) non fornisce la if/elsefunzionalità. Di seguito sono riportate alcune opzioni da considerare per ciò che si desidera ottenere:

( Vai all'aggiornamento di seguito (n. 5) se stai utilizzando la versione 1.1.5 o successiva )

1. Operatore ternario:

Come suggerito da @Kirk nei commenti, il modo più pulito per farlo sarebbe usare un operatore ternario come segue:

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

2. ng-switchdirettiva:

può essere usato qualcosa di simile al seguente.

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

In alternativa, potresti anche usare, ng-show/ng-hidema l'utilizzo di questo renderà effettivamente sia un video di grandi dimensioni che un piccolo elemento video e quindi nasconderà quello che soddisfa la ng-hidecondizione e mostra quello che soddisfa la ng-showcondizione. Quindi, in ogni pagina, verranno visualizzati due elementi diversi.

4. Un'altra opzione da considerare è la ng-classdirettiva.

Questo può essere usato come segue.

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

Quanto sopra sostanzialmente aggiungerà una large-videoclasse CSS all'elemento div se video.largeè vero.

AGGIORNAMENTO: Angular 1.1.5 ha introdotto ilngIf directive

5. ng-ifdirettiva:

Nelle versioni precedenti 1.1.5è possibile utilizzare la ng-ifdirettiva. Ciò rimuove l'elemento se l'espressione fornita ritorna falsee reinserisce il elementnel DOM se l'espressione ritorna true. Può essere usato come segue.

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

Nell'ultima versione di Angular (dalla 1.1.5), hanno incluso una direttiva condizionale chiamata ngIf. È diverso da ngShowe ngHidein quanto gli elementi non sono nascosti, ma non sono affatto inclusi nel DOM. Sono molto utili per i componenti che sono costosi da creare ma non utilizzati:

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

Ternary è il modo più chiaro per farlo.

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

Angular stesso non fornisce la funzionalità if / else, ma puoi ottenerlo includendo questo modulo:

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

In parole sue, è solo "una semplice raccolta di direttive sul flusso di controllo: ng-if, ng-else-if e ng-else". È facile e intuitivo da usare.

Esempio:

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

È possibile utilizzare video.yt$aspectRatiodirettamente la proprietà passandola attraverso un filtro e associando il risultato all'attributo height nel modello.

Il tuo filtro sarebbe simile a:

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

E il modello sarebbe:

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

In questo caso, si desidera "calcolare" un valore in pixel in base alla proprietà di un oggetto.

Definirei una funzione nel controller che calcola i valori dei pixel.

Nel controller:

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

Quindi nel tuo modello scrivi semplicemente:

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

Sono d'accordo che un ternario è estremamente pulito. Sembra che sia molto situazionale anche se come qualcosa ho bisogno di visualizzare div o p o table, quindi con un tavolo non preferisco un ternario per ovvi motivi. Effettuare una chiamata a una funzione è in genere l'ideale o nel mio caso ho fatto questo:

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

puoi usare la direttiva ng-if come sopra.

Una possibilità per Angular: ho dovuto includere un'istruzione if nella parte html, ho dovuto verificare se tutte le variabili di un URL che produco sono definite. L'ho fatto nel modo seguente e sembra essere un approccio flessibile. Spero che sarà utile per qualcuno.

La parte html nel modello:

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

E la parte dattiloscritta:

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

Grazie e distinti saluti,

Jan

Dichiarazione If else

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