if-statement - then - ng if typescript




if else statement in AngularJS templates (6)

Voglio fare una condizione in un modello AngularJS. Prendo un elenco di video dall'API di YouTube. Alcuni dei video sono in rapporto 16: 9 e alcuni sono in rapporto 4: 3.

Voglio fare 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:

  • Aggiungi una funzione nell'ambito?
  • Fatelo nel modello?

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

Il tuo filtro sarà simile a qualcosa:

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>

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

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

Nelle sue stesse parole, è 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>

Il ternario è il modo più chiaro per farlo.

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

In questo caso si desidera "calcolare" un valore in pixel dipendente da una proprietà dell'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 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 ideale o nel mio caso l'ho fatto:

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

Una possibilità per Angular: dovevo includere un'istruzione if nella parte html, dovevo controllare 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 dattiloscritto:

  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





angularjs