if-statement - else - ngif angular 5 example
declaración if else en plantillas AngularJS (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?
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>
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>
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 "
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>
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>
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>
Ternary es la forma más clara de hacer esto.
<div>{{ConditionVar ? ''varIsTrue'' : ''varIsFalse''}}</div>
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
<div ng-if="modeldate==''''"><span ng-message="required" class="change">Date is required</span> </div>
Puede usar la directiva ng-if como se indica arriba.