if-statement condition - declaración if else en plantillas AngularJS




ngif ionic (9)

Quiero hacer una condición en una plantilla AngularJS. Obtengo una lista de videos de la API de Youtube. Algunos de los videos tienen una relación de 16: 9 y algunos tienen una relació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é debo hacer para esta condición:

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

Answers

Puede usar su propiedad video.yt$aspectRatio directamente pasándola a través de un filtro y vinculando el resultado al atributo de altura en su plantilla.

Su filtro se vería algo así 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>

Una posibilidad para Angular: tuve que incluir una declaración if - en la parte html, tuve que comprobar 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 de ayuda 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


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

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

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

Ejemplo:

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

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 los componentes que son costosos de crear pero que no se utilizan:

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

En este caso, desea "calcular" un valor de píxel en función de una propiedad de objeto.

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

En el controlador:


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

Luego en tu plantilla solo escribes:


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


Ternary es la forma más clara de hacer esto.

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

Estoy de acuerdo en que un ternario es extremadamente limpio. Parece que es muy situacional, aunque como algo necesito mostrar div o p o table, así que con una tabla 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>

Angularjs (versiones debajo de 1.1.5) no proporciona la funcionalidad if/else . A continuación se presentan algunas opciones a considerar para lo que quiere lograr:

( Salte a la actualización a continuación (# 5) si está utilizando la versión 1.1.5 o superior )

1. Operador ternario:

Según lo sugerido por @Kirk en los comentarios, la forma más limpia de hacerlo sería utilizar un operador ternario de la siguiente manera:

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

2. Directiva ng-switch :

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. Directivas de ng-hide / ng-show

Alternativamente, también puede usar ng-show/ng-hide pero al usar esto, se renderizará tanto un gran video como un pequeño elemento de video y luego se ocultará el que cumpla con la condición ng-hide y muestre el que cumpla ng-show condición ng-show . Así que en cada página realmente estarás renderizando dos elementos diferentes.

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

Esto se puede utilizar de la siguiente manera.

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

Lo anterior básicamente agregará una clase css de large-video grande al elemento div si video.large es veraz.

ACTUALIZACIÓN: Angular 1.1.5 introdujo la ngIf directive

5. Directiva ng-if :

En las versiones anteriores 1.1.5 puede usar la directiva ng-if . 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 devuelve 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>

De ninguna manera quiero competir con la respuesta de Mark, pero solo quería resaltar la pieza que finalmente hizo que todo hiciera clic como alguien nuevo en la herencia de Javascript y su cadena de prototipos .

Sólo las lecturas de propiedades buscan en la cadena del prototipo, no las escrituras. Así que cuando te pones

myObject.prop = '123';

No busca la cadena, pero cuando lo pones

myObject.myThing.prop = '123';

se está realizando una lectura sutil dentro de esa operación de escritura que intenta buscar myThing antes de escribir en su prop. Por eso es que escribir en object.properties del hijo obtiene en los objetos del padre.





if-statement angularjs