instruction if else dans les modèles AngularJS

Je veux faire une condition dans un modèle AngularJS. Je récupère une liste de vidéos depuis l'API Youtube. Certaines vidéos sont au format 16: 9 et d'autres au format 4: 3.

Je veux faire une condition comme ça:

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

J'itère les vidéos en utilisant ng-repeat. Je n'ai aucune idée de ce que je dois faire pour cette condition:

• Ajouter une fonction dans la portée?
• Faites-le dans le modèle?

Angularjs (versions inférieures à 1.1.5) ne fournit pas la if/elsefonctionnalité. Voici quelques options à considérer pour ce que vous voulez réaliser:

( Passez à la mise à jour ci-dessous (# 5) si vous utilisez la version 1.1.5 ou supérieure )

1. Opérateur ternaire:

Comme suggéré par @Kirk dans les commentaires, la façon la plus propre de le faire serait d'utiliser un opérateur ternaire comme suit:

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

2. ng-switchdirective:

peut être utilisé quelque chose comme ce qui suit.

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

Alternativement, vous pouvez également utiliser, ng-show/ng-hidemais son utilisation rendra à la fois une grande vidéo et un petit élément vidéo, puis masquera celle qui remplit la ng-hidecondition et affiche celle qui remplit la ng-showcondition. Donc, sur chaque page, vous allez réellement afficher deux éléments différents.

4. Une autre option à considérer est la ng-classdirective.

Cela peut être utilisé comme suit.

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

Ce qui précède ajoutera essentiellement une large-videoclasse css à l'élément div s'il video.largeest véridique.

MISE À JOUR: Angular 1.1.5 a introduit lengIf directive

5. ng-ifdirective:

Dans les versions ci-dessus, 1.1.5vous pouvez utiliser la ng-ifdirective. Cela supprimerait l'élément si l'expression fournie retourne falseet réinsère le elementdans le DOM si l'expression revient true. Peut être utilisé comme suit.

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

Dans la dernière version d'Angular (à partir du 1.1.5), ils ont inclus une directive conditionnelle appelée ngIf. Il est différent ngShowet ngHideen ce sens que les éléments ne sont pas cachés, mais pas du tout inclus dans le DOM. Ils sont très utiles pour les composants dont la création est coûteuse mais qui ne sont pas utilisés:

<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 est le moyen le plus clair de le faire.

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

Angular lui-même ne fournit pas de fonctionnalité if / else, mais vous pouvez l'obtenir en incluant ce module:

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

Dans ses propres mots, c'est juste "une simple collection de directives de flux de contrôle: ng-if, ng-else-if et ng-else". C'est simple et intuitif à utiliser.

Exemple:

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

Vous pouvez utiliser votre video.yt$aspectRatio propriété directement en la passant dans un filtre et en liant le résultat à l'attribut height de votre modèle.

Votre filtre ressemblerait à quelque chose comme:

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

Et le modèle serait:

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

Dans ce cas, vous souhaitez «calculer» une valeur de pixel en fonction d'une propriété d'objet.

Je définirais une fonction dans le contrôleur qui calcule les valeurs des pixels.

Dans le contrôleur:

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

Ensuite, dans votre modèle, vous écrivez simplement:

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

Je suis d'accord qu'un ternaire est extrêmement propre. Il semble que cela soit très situationnel, mais comme je dois parfois afficher div ou p ou table, donc avec une table, je ne préfère pas un ternaire pour des raisons évidentes. Faire un appel à une fonction est généralement idéal ou dans mon cas, je l'ai fait:

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

vous pouvez utiliser la directive ng-if comme ci-dessus.

Une possibilité pour Angular: j'ai dû inclure une instruction if - dans la partie html, j'ai dû vérifier si toutes les variables d'une URL que je produis sont définies. Je l'ai fait de la manière suivante et cela semble être une approche flexible. J'espère que ce sera utile pour quelqu'un.

La partie html dans le modèle:

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

Et la partie dactylographiée:

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

Merci et meilleures salutations,

Jan

ng instruction If else

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