Pregunta if else instrucción en plantillas AngularJS


Quiero hacer una condición en una plantilla AngularJS. Busco una lista de videos de la API de Youtube. Algunos de los videos tienen una relación de 16: 9 y algunos tienen una proporción de 4: 3.

Quiero hacer una condición como esta:

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

Estoy iterando los videos usando ng-repeat. No tengo idea de qué debería hacer para esta condición:

  • Agregar una función en el alcance?
  • Hacerlo en plantilla?

645
2018-04-04 11:50


origen


Respuestas:


Angularjs (versiones inferiores a 1.1.5) no proporciona el if/else funcionalidad. Las siguientes son algunas opciones a considerar para lo que quiere lograr:

(Vaya a la actualización a continuación (n. ° 5) si está utilizando la versión 1.1.5 o superior)

1. Operador ternario:

Como sugirió @Kirk en los comentarios, la forma más limpia de hacer esto sería usar un operador ternario de la siguiente manera:

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

2. ng-switch directiva:

se puede usar algo como lo siguiente.

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

Alternativamente, también puede usar ng-show/ng-hide pero usar esto en realidad representará tanto un video grande como un pequeño elemento de video y luego ocultará el que se encuentra con el ng-hide condición y muestra el que cumple ng-show condición. Entonces en cada página estarás representando dos elementos diferentes.

4. Otra opción para considerar es ng-class directiva.

Esto se puede usar de la siguiente manera.

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

Lo anterior básicamente agregará un large-video clase CSS al elemento div si video.large es verdad

ACTUALIZAR: Angular 1.1.5 introdujo el ngIf directive

5. ng-if directiva:

En las versiones anteriores 1.1.5 puedes usar el ng-if directiva. Esto eliminaría el elemento si la expresión proporcionada devuelve false y vuelve a insertar el element en el DOM si la expresión regresa true. Puede ser utilizado de la siguiente manera.

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

1193
2018-04-04 11:58



En la última versión de Angular (a partir de 1.1.5), han incluido una directiva condicional llamada ngIf. Es diferente de ngShow y ngHide en que los elementos no están ocultos, pero no están incluidos en el DOM en absoluto. Son muy útiles para componentes que son costosos de crear pero que no se usan:

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

164
2017-07-09 16:54



El ternario es la forma más clara de hacer esto.

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

133
2017-09-05 05:18



Angular en sí no proporciona funcionalidad if / else, pero puede obtenerlo incluyendo este módulo:

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

En sus propias palabras, es solo "una simple colección de directivas de flujo de control: ng-if, ng-else-if y ng-else". Es fácil de usar e intuitivo.

Ejemplo:

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

41
2017-10-03 21:38



Podrías usar tu video.yt$aspectRatio directamente pasando a través de un filtro, y vinculando el resultado al atributo de altura en su plantilla.

Tu filtro se vería como:

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

Y la plantilla sería:

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

26
2018-04-04 16:45



En este caso, desea "calcular" un valor de píxel dependiendo de la propiedad de un objeto.

Definiría una función en el controlador que calcula los valores de píxel.

En el controlador:


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

Luego, en su plantilla, simplemente escriba:


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


10
2017-10-29 11:35



Estoy de acuerdo en que un ternario es extremadamente limpio. Parece que es muy situacional, aunque como algo tengo que mostrar div o p o mesa, así que con una mesa no prefiero un ternario por razones obvias. Hacer una llamada a una función suele ser ideal o en mi caso lo hice:

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

8
2017-07-23 20:58



    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

puede usar la directiva ng-if como se indicó anteriormente.


3
2017-12-08 12:36



Una posibilidad para Angular: Tuve que incluir una declaración if en la parte html, tuve que verificar si todas las variables de una URL que produzco están definidas. Lo hice de la siguiente manera y parece ser un enfoque flexible. Espero que sea útil para alguien.

La parte html en la plantilla:

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

Y la parte mecanografiada:

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

Gracias y un saludo,

Ene


1
2017-10-09 08:44