If else statement in AngularJS templates

Na última versão do Angular (a partir de 1.1.5), eles incluíram uma directiva condicional chamada ngIf. É diferente de ngShow e ngHide em que os elementos não estão escondidos, mas não estão incluídos no DOM. Eles são muito úteis para componentes que são caros para criar, mas não são usados:

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

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

O Angular em si não fornece a funcionalidade "se/else", mas você pode obtê-la incluindo este módulo:

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

Em suas próprias palavras, é apenas " uma simples coleção de diretivas de fluxo de controle: ng-if, ng-else-if, e ng-else."É fácil e intuitivo de usar.

Exemplo:

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

Pode usar a sua propriedade video.yt$aspectRatio directamente passando-a através de um filtro e ligando o resultado ao atributo altura do seu modelo.

O seu filtro pareceria algo como:

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

E o modelo seria:

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

Neste caso, deseja "calcular" um valor de pixel, dependendo de uma propriedade do objecto.

Eu definiria uma função no controlador que calcula os valores dos pixels.

No controlador:

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

Então no seu modelo você apenas escreve:

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

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

Pode utilizar a Directiva ng-se a Directiva acima referida.

Uma possibilidade para Angular: Eu tive que incluir uma declaração if na parte html, eu tive que verificar se todas as variáveis de uma URL que eu produzi estão definidas. Fi-lo da seguinte forma e parece ser uma abordagem flexível. Espero que seja útil para alguém.

A parte html do modelo:

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

E a parte do texto:

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

Jan